Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 1, 2017 at 4:40 am #106206
    theodisbutler
    Participant

    The tag <header id=”masthead” class=”site-header”>

    gets a class added called “is-sticky” when scrolling down the page. Not sure if it’s custom javascript or bootstrap functionality. I checked the options for the theme and didn’t see any “make menu sticky” type of option.

    Since I’ve customized the menu exactly how I want it, I don’t need it to “transition” or slide out of place when I scroll down the page. Thank you!

    The website is http://stanmosleysoul.com

    January 1, 2017 at 10:05 am #106216
    Pratik
    Participant

    Hi @theodisbutler,

    I have asked our CSS expert to look into this for you. He will reply you soon.

    Regards,
    Pratik

    January 1, 2017 at 10:24 pm #106261
    theodisbutler
    Participant

    Thanks a lot! It may be a javascript thing!

    January 2, 2017 at 10:40 am #106290
    Mahesh
    Participant

    @theodisbutler: Yes, it is custom javascript. But if you don’t want the transition, you’ve can simply do it with Custom CSS. Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

    .is-sticky .site-logo img {
	max-height: 63px;
}

.is-sticky .main-navigation a {
    padding: 7px 9px;
}

.is-sticky .site-header-menu {
	padding-top: 10px;
}

    Regards,
    Mahesh

    January 3, 2017 at 11:19 am #106344
    theodisbutler
    Participant

    Thanks again guys! Excellent support! I have never seen anything like this before in my life! CSS for the win!

    January 3, 2017 at 3:38 pm #106354
    Mahesh
    Participant

    @theodisbutler: Thank you for your appreciation. Have a nice day!

    Regards,
    Mahesh

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Sticky Header’ is closed to new replies.