how to make menu bar static?

  • Resolved eb2323

    (@eb2323)


    11 years, 2 months ago

    how do I make my menu bar static?

    I want it to stay in place when I scroll my content.

    it looks like this right now: http://itsnotjustlyme.com

    when I go into the css under .nav section, I add in:
    }
    position: fixed;
    width: 100%;

    ^ that does not work… it ends up looking like this: http://i.imgur.com/mp3Ak4f.jpg

    what css code am I missing and where do I add it?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 2 months ago

    You were close. Once you set position: fixed on the header area, it takes it out of the document flow, leading to it overlapping the content area. You need to set a z-index on the header area so it stacks above the content area and then give the content area some top margin so all the content can be seen:

    #masthead {
	position: fixed;
	width: 100%;
	z-index: 50;
}

.main-content-area {
	margin-top: 350px;
}

    Also, be aware that if you’re editing the theme files directly (using Dashboard > Appearance > Editor or cPanel or some other file management application), you’ll lose those changes if the theme is ever updated in the future. Better to use a custom CSS plugin or your theme’s built-in custom CSS option, if one exists.

    Thread Starter eb2323

    (@eb2323)

    11 years, 2 months ago

    awesome! that z-index: 50 worked like a charm!

    Thanks dude! you’re the real mvp!

    Thread Starter eb2323

    (@eb2323)

    11 years, 2 months ago

    Hello again Stephen,

    I have one more question:

    is there a way to make just the top menu links static (fixed)?
    so when I scroll, the banner disappears up top, but the links will move into place and stay… like this: http://i.imgur.com/TErJ2m3.jpg

    thanks again

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘how to make menu bar static?’ is closed to new replies.