Help :'( Menu shows below content when scrolling :(

Help :'( Menu shows below content when scrolling :(
0

#1

How do I make the top menu to be in front of all the other content?

You can see that when scrolling down the page, The images get in front of the menu, and because of that it becomes useless if you want to go to another section.

Help please?


#2

you can use the z-index CSS property
since you are using Fixed position then it will work for you.


#3

Thank you! I used z-index: 1; and it worked. Now, the bar behind the menu disappeared :’(


#4

is it because of its color? or did it completely disappear?


#5

Well it’s not there, I thought there would be a bar in the background but when I scroll down the only thing that stays are the buttons. They are like floating…


#6

I’ve noticed you’re using bootstrap, it already has navbar component you can tweak

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- 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="#bs-example-navbar-collapse-1" 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" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

read more about bootstrap navbar


#7

Yeah, that was because the color of the bar was blending with the background of the section depending on its color it will seem like it disappeared?

Remove the inline styling style="background-color: gray" from your menu div and just use the external CSS. It will save you from having too much confusion when debugging. it also overwrites the external styling. CSS hierarchy here

And try and change the background color for your #menu to white or something different and see if it is just color choice issue or something else.

I would recommend you to try using the navbar as pseudop has suggested. Might be a bit of work but will save you time in the long run once you get the hang of the different things you can do with it.


#8

wow thank you! I will update my code soon with this new info :slight_smile: very useful!


#9

I will also try it :slight_smile: thank you! I’ll be back with an answer as soon as I can test it.