0

I am trying to remake this: https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

The thing is, I don't want to just copy this example, I want to make it my own by changing certain parts (after first 100% remaking it).

This is the end-result: https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm#myPage

If you try to make the page smaller, you will see that the navbar changes to a button (consisting of 3 icon-bars on top of eachother) that you can click. Now I want to change this button so it has the following characteristics:

  • If you hover on it, background should become white and the 3 icon-bars should become orange;
  • If you click on the button, background should become white and the 3 icon-bars should become orange. So what I want is that when the navbar has collapsed it should have this orange/white color scheme. If it hasn't collapsed it should return to normal (unless it's been hovered on)

The problem is, nothing I have tried works.

Here is my relevant html:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#services">SERVICES</a></li>
                <li><a href="#portfolio">PORTFOLIO</a></li>
                <li><a href="#pricing">PRICING</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

Here is my relevant cs:

    .navbar {
        margin-bottom: 0;
        background-color: #f4511e;
        z-index: 9999;
        border: 0;
        font-family: Montserrat, sans-serif;
        font-size: 12px !important;
        letter-spacing: 4px;
        border-radius: 0;
    }

    .navbar li a, .navbar .navbar-brand {
        color: #FFFFFF !important;
    }

    .navbar-nav li a:hover, .navbar-nav li.active a {
        color: #f4511e !important;
        background-color: #FFFFFF !important;
    }

    .navbar-default .navbar-toggle {
        border-color: transparent;
        color: #ffffff;
    }

    .navbar-toggle:hover {
        background: white !important;
        color: #F4511e !important;
    }

    .navbar-toggle:focus {
        background: white !important;
        color: #F4511e !important;
    }

    .navbar-toggle:hover .icon-bar {
        background: #F4511e !important;
    }

    .navbar-toggle:focus .icon-bar {
        background: #F4511e !important;
    }

    .navbar-toggle .icon-bar {
        background: white !important;
    }

The big problem I am having is that focus doesn't do what I want, because when I click the button and then click somewhere else it changes back to its standard color scheme. I understand why, because it's not active anymore and isn't being hovered.

So I need somethink like focus, but that's linked with the navbar being collapsed or not. Do you guys have any idea how to achieve this?

After searching around the internet I found this question: how to change navbar color when nav-toggle is clicked

It's almost the same question as I have, but I don't really understand what Alaksandar Jesus Gene did and I can't make it work. Can someone explain what he did (see below) and help me understand what I should change to make it work in my own example?

Solution code that I don't quite understand: 

.navbar-yellow{

    background-color: yellow !important;
}

$(".navbar-toggle").click(function(){
$("nav").toggleClass("navbar-yellow");
})

Any help/ideas is/are greatly appreciated.

Thanks in advance,

CvP
  • 324
  • 1
  • 4
  • 17

2 Answers2

2

You can use .toggleClass() on the button.

I've given the button an id and selected it with jQuery. Add the class is-active to the button when it has been clicked. And in your CSS, style this class as you need.

fiddle

$(function() {
  var hamburger = document.getElementById('hamburger');

  $(hamburger).click(function() {
    $(this).toggleClass('is-active');
  })
})
.navbar {
  margin-bottom: 0;
  background-color: #f4511e !important;
  z-index: 9999;
  border: 0;
  font-family: Montserrat, sans-serif;
  font-size: 12px !important;
  letter-spacing: 4px;
  border-radius: 0;
}

.navbar li a,
.navbar .navbar-brand {
  color: #FFFFFF !important;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #f4511e !important;
  background-color: #FFFFFF !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #ffffff;
}

#hamburger .icon-bar {
  background: white;
}

#hamburger:hover,
#hamburger.is-active {
  background: white !important;
}

#hamburger:hover .icon-bar,
#hamburger.is-active .icon-bar {
  background: #F4511e !important;
}

#hamburger:focus {
  background: #F4511e;
}

#hamburger:focus .icon-bar {
  background: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" id="hamburger">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#myPage">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>
sol
  • 22,311
  • 6
  • 42
  • 59
  • I think this is the correct answer. Am I correct in assuming that I don't really need the :focus parts in my css anymore? As far as I can see they serve no purpose. – CvP Jan 13 '18 at 19:58
  • 1
    I added properties for `:focus` to ensure the default bootstrap styles were being overridden. You can see them at the end of the CSS in the demo and snippet – sol Jan 13 '18 at 20:01
  • I did see them in your demo/snippet, but after deleting them I didn't notice a difference. After a bit more clicking and actually paying attention, you are right, without the :focus parts you will again see the default bootstrap styles. Thanks for all the help. – CvP Jan 13 '18 at 20:05
  • 1
    Note that you can add `transition` on the icon and the icon-bar for a subtle effect. --> https://jsfiddle.net/sol_b/9a24wff1/ – sol Jan 13 '18 at 20:07
  • Thanks a lot, looks great. For other beginners like me, if you want to understand why we need multiple transitions instead of for example 1, just change the 0.3s to 3s and you will see what each transition does. It helped me see what each parts does and helped me understand the transition parts. – CvP Jan 13 '18 at 20:15
  • I have another question after playing around a bit, was hoping if you could help me. Here is my current code: https://jsfiddle.net/cvc7ynpu/ . I want the filter button acting the same as my "hamburger" button. So the collapse should be 100% of the width of the screen (height should depend on input) and have the same colors. I tried giving this dropdown an ID like with hamburger and then giving it the same css as #hamburger, because I figured then it should act the same. Unfortunately it didn't work, any ideas why or what I can do better? @sol – CvP Jan 14 '18 at 09:57
  • Solved it: https://jsfiddle.net/cvc7ynpu/1/ I just need to do another #hamburger thing so that when it becomes active it goes to the correct color and stays the correct color. – CvP Jan 14 '18 at 11:22
  • Anyone that can help me? This is my base code: jsfiddle.net/cvc7ynpu/1 I can't figure out the is-active for this dropdown and am currently stuck with the default colors when it's pressed once and then not hovered. I tried remaking the hamburger example, but I can't figure it out. – CvP Jan 14 '18 at 12:59
  • 1
    @CvP are you still stuck on this? – sol Jan 15 '18 at 09:20
  • Unfortunately, yes, this is my current code: https://jsfiddle.net/2eg42ebn/1/ I have two problems: 1) my filter icon is still not the right color when it isn't focused or active (it goes grey/white instead of orange/white). 2) I want this filter button to collapse and decollapse only when I press this filter button. I know it isn't a button atm, but a dropdown, but I even tried it making a button but that also didn't work. For example I tried doing this: https://stackoverflow.com/q/21982308/7194124 This didn't work and I don't know why. Any help would be greatly appreciated! @sol – CvP Jan 16 '18 at 10:16
  • This is a good example of how I want my filter button/dropdown to work: https://www.bootply.com/SpLKL9WW7d# – CvP Jan 16 '18 at 10:34
  • 1
    The bootply didn't run for me. Is this what you're looking for --> https://jsfiddle.net/sol_b/3pvnsLb1/1/ -- or do you want the hover effect on the filter icon to stay while the dropdown is open? – sol Jan 16 '18 at 10:59
  • I am already happy with what you send, but in an ideal world I would want the hover effect as well. Another thing, I also don't want it to collapse when I press inside the collapsed area (just like when I press on the page). @sol – CvP Jan 16 '18 at 11:31
  • The bootply apparently doesn't work with the newer bootstrap versions. Here is an example of what I want to achieve in regards to functionality: https://jsfiddle.net/a7a63heg/ Interestingly enough this example doesn't use js at all, and still does what I want (only when you click on the button collapse or decollapse) – CvP Jan 16 '18 at 11:42
  • 1
    Ok try this -- https://jsfiddle.net/sol_b/3pvnsLb1/3/ -- I needed to make a few changes. Main thing was changed `#filter` to be the anchor tag, and not the list item – sol Jan 16 '18 at 11:43
  • 1
    That bootply is using JS. It's in the bootstrap.js.min file :) – sol Jan 16 '18 at 11:45
  • 1
    That looks and works great, thank you very much. I'll be reading/looking into what you did exactly and try to understand what I did wrong before. The only thing missing atm is that the hover effect doesn't stay on the filter icon while the dropdown is open. But that is a small thing that I can maybe figure out myself. Ha, that's way more logical that it's using the bootstrap.js, I was already amazed how that would work. Thanks again for all the help, really appreciate it! – CvP Jan 16 '18 at 11:52
  • I see I forgot to include the latest and working jsfiddle, so here it is: https://jsfiddle.net/3pvnsLb1/4/ @sol I do have another question if you don't mind. I am trying to remake the navbar from this: https://research.hackerrank.com/developer-skills/2018/ Is there any way I can change my current navbar so that it sticks to the left? I tried a lot of different options/examples but nothing really worked. I also want to make this in bootstrap 4, but that means I have even less examples. Do you have any ideas / pointers on how to make this with bootstrap 4? – CvP Feb 06 '18 at 11:39
  • For people finding this through google: I made a new question regarding the above problem: https://stackoverflow.com/questions/48695875/how-to-re-use-the-navigation-javascript-from-a-bootstrap-navbar-in-a-vertical-pa – CvP Feb 09 '18 at 09:58
1

OK, here's the breakdown of this snippet: 

$(".navbar-toggle").click(function(){
$("nav").toggleClass("navbar-yellow");
})

First, jQuery finds an element with the class .navbar-toggle (which happens to be the hamburger button in this case) and then begins listening for a click.

As soon as a click is detected jQuery runs this function:

$("nav").toggleClass("navbar-yellow");

In that function jQuery first finds the HTML element nav (which in this case contains the entire navigation i.e. everything between <nav> and </nav>) and then toggles the class navbar-yellow on that HTML element.

"Toggle" means: jQuery checks whether that particular class is currently applied to that element (nav) or not. And if nav does have the navbar-yellow at the moment, then jQuery removes it. Otherwise, jQuery will add that class to the nav element. And then, of course, that css class will do whatever it is supposed to do (apply the color yellow to the background in that case).

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
  • So in my case I need to change "nav" to "button"? and I can change "navbar-yellow" to for example "navbar-toggle-yellow"? – CvP Jan 13 '18 at 19:54
  • 1
    Note: Bootstrap has lots of native classes that can get done almost anything without additional jQuery code. – WebDevBooster Jan 13 '18 at 19:54
  • Could you point me in the right direction, which native class should/could I use? I am a total noob at this, but would preferably know of all the different methods to achieve something like this. – CvP Jan 13 '18 at 19:55
  • The first thing to check would be the Bootstrap navbar documentation here: https://getbootstrap.com/docs/4.0/components/navbar/ However, I think if you want a custom color scheme, then your original approach was actually OK. I'll post an update in a minute. – WebDevBooster Jan 13 '18 at 20:00