Skip to main content
carolyn@10541
carolyn@10541
Known Participant
May 9, 2017
Answered

Nav bar question

  • May 9, 2017
  • 2 replies
  • 784 views

My client wants me to have 5 tabs/pills on the navigation bar and each would have a different color background (ie: home would have an orange background, science would have a green background, all with black text). It appears to me the best way would be to use pills and change the background color. I can also make the menus in illustrator cc and make the images clickable. Which do you think would work best or maybe another idea would work best.

Thanks.

Carolyn

This topic has been closed for replies.
Correct answer BenPleysier

You could use the included Bootstrap classes as in

<li><a href="contact.html" class="bg-danger">CONTACT US</a></li>

or you can create your own classes as in

.home {

  background-color: orange;

  color: black;

}

.science {

  background-color: greenyellow;

  color: black;

}

and usage

<li class="active"><a href="home.html" class="home">HOME<span class="sr-only"></span></a></li>

<li><a href="science.html" class="science">SCIENCE WORKBOOKS</a></li>

As a side note: You may like to write Home instead of HOME and use the style rule

text-transform: uppercase;

That way it will be easier to modify down the track

2 replies

carolyn@10541
carolyn@10541Author
Known Participant
May 10, 2017

Nancy,

Below is my code.

<nav>

    <!-- Brand and toggle get grouped for better mobile display -->

             <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="defaultNavbar1">

                  <!-- Brand and toggle get grouped for better mobile display -->

                  <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

                    <a class="navbar-brand"></a></div>

                    <ul class="nav navbar-nav">

                      <li class="active"><a href="home.html">HOME<span class="sr-only"></span></a></li>

                      <li><a href="science.html">SCIENCE WORKBOOKS</a></li>

                      <li><a href="socialstudies.html">SOCIAL STUDIES WORKBOOKS</a></li>

                      <li><a href="contact.html">CONTACT US</a></li>

                      <li><a href="cart.html">CART</a></li>

                        </ul>

                     <form class="navbar-form navbar-right" role="search">

                      <div class="form-group">

                        <input type="text" class="form-control" placeholder="Search">

                      </div>

                      <button type="submit" class="btn btn-default">Submit</button>

                    </form>

                  </div>

                  <!-- /.navbar-collapse -->

                </div>

                <!-- /.container-fluid -->

              </div></nav><br /><br />

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
May 10, 2017

You could use the included Bootstrap classes as in

<li><a href="contact.html" class="bg-danger">CONTACT US</a></li>

or you can create your own classes as in

.home {

  background-color: orange;

  color: black;

}

.science {

  background-color: greenyellow;

  color: black;

}

and usage

<li class="active"><a href="home.html" class="home">HOME<span class="sr-only"></span></a></li>

<li><a href="science.html" class="science">SCIENCE WORKBOOKS</a></li>

As a side note: You may like to write Home instead of HOME and use the style rule

text-transform: uppercase;

That way it will be easier to modify down the track

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
carolyn@10541
carolyn@10541Author
Known Participant
May 10, 2017

Thank you Ben and everyone. Will let you know how it turns out.

Appreciate the assist.

Have a good night.

Carolyn

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 9, 2017

Real text-based navigation (Tabs or Pills) is so much better for search engines & translators to interpret.  Images are invisible.  More importantly, images have to be recreated in your graphics app every time you update the site.  So my advice is stay away from image-based navigation.   It's more work and less web friendly.

Nancy

Nancy O'Shea— Product User & Community Expert
carolyn@10541
carolyn@10541Author
Known Participant
May 9, 2017

Thanks Nancy. How do I handle the background color?

Carolyn

Sent from my iPhone

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 9, 2017

How do I handle the background color?

With the CSS Background property.

You can use solid colors with #hex, rgb or rgba colors,  or CSS gradients,  or background-images.  

If you want a different BG on each item, you'll need to give each one an ID so you can target that element with your style.   Another option is to use the nth-child or nth-child of type pseudo classes instead of an ID.

I would need to see your HTML code to be more specific.

Nancy

Nancy O'Shea— Product User & Community Expert
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices