fix sticky menu CSS/ Stop sticky menu from jumping

  • Resolved seldoviajuno

    (@chelseyt)


    8 years, 3 months ago

    I figured out how to move the elements in my php file so that the top bar nav menu is above the header. Formerly it was below. Now I am hoping to get the nav bar to stick to the top when scrolling instead of jumping to the top after a few moments of scrolling.

    This theme has a header that when no image is put in there logo pops up so I have 1 px high image in their to work around that in case that makes a difference.

    The top bar in the theme was put into a container and this is the html/css:

    #top-bar {
	height:50px;
	margin-bottom:50px;
	background:#326ada;
	width:100%;
	/* position:fixed; */
	z-index:9999;
	-webkit-backface-visibility: hidden;
}
#top-bar .container {
	position: relative;
}

#top-bar.fixedMenu {
   	margin-top: 0;
	position: fixed;
	top: 0px;
	z-index:99999;
	opacity: 0.8;
}

    As far as I can tell this is the only code to be figured out.

    my website is http://www.chelseythornton.com, Any feedback would be great!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Robin

    (@cinghaman)

    8 years, 3 months ago

    Hi
    In your #top-bar uncomment the position:fixed
    this will make it stick to top, without hiding it when u scroll.
    Cheers
    Robin

    Thread Starter seldoviajuno

    (@chelseyt)

    8 years, 3 months ago

    ROBIN! Thank you so much, I spent an embarrassing amount of hours trying to fix that out.

    Awesome, so happy.

    Robin

    (@cinghaman)

    8 years, 3 months ago

    Glad to know i could be of help
    Cheers

    Thread Starter seldoviajuno

    (@chelseyt)

    8 years, 3 months ago

    Hi Robin,

    I was wondering since you were so quick to fix my simple mistake in my last post if I could ask you a quick question again?
    In case yes…

    I put a span class title divider at the end of my post title div element and for some reason I can’t get the css to work properly to have it center. The margins keep either pulling it far left or to near the title. Here is the Css.

    .title-title-divider {
	border-top: 2px solid;
	display: block;
	max-width: 48px;
	margin: 0 0 auto 15px;
	color: #000;
}

    Robin

    (@cinghaman)

    8 years, 3 months ago

    you will need to use margin: 0 auto; to make it center

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘fix sticky menu CSS/ Stop sticky menu from jumping’ is closed to new replies.