Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #106216
    Pratik
    Keymaster

    Hi @theodisbutler,

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

    Regards,
    Pratik

    #106261
    theodisbutler
    Participant

    Thanks a lot! It may be a javascript thing!

    #106290
    Mahesh
    Keymaster

    @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

    #106344
    theodisbutler
    Participant

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

    #106354
    Mahesh
    Keymaster

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

    Regards,
    Mahesh

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