• Hello, I have a problem, sticky menu doesn’t work on desktop or mobile. I searched here and none of the presented methods work.

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter adrianlmt

    (@adrianlmt)

    It works now on desktop, but it still doesn’t work on mobile.
    I also added:

    .sticky-header-active .mobile-header {
    position: sticky;
    top: 0;
    }
    What did I miss?

    Hi @adrianlmt,

    Your mobile menu might have different CSS selector.

    If so, try this CSS code:

    .sticky-header-active .bhfb-mobile {
        position: sticky;
        top: 0;
        z-index: 9;
    }
    Thread Starter adrianlmt

    (@adrianlmt)

    Thanks for the reply, that was the problem.

    Now everything works ok!

    One more question, can only ‘Bottom header row’ be displayed on mobile? Thank you for your help

    One more question, can only ‘Bottom header row’ be displayed on mobile? Thank you for your help

    Try adding this CSS code:

    .bhfb-mobile .bhfb-below_header_row.bt-d-none {
       display: block !important; 
    }
    Thread Starter adrianlmt

    (@adrianlmt)

    Unfortunately it doesn’t work…

    This is the site: https://lmtcollection.ro

    • This reply was modified 2 years, 1 month ago by adrianlmt.
    Thread Starter adrianlmt

    (@adrianlmt)

    It seems that it doesn’t work to display only the ‘Bottom header row’, but I reduced the size of the logo, and it looks better now.
    I’m still looking for a solution.

    Trying to do the same thing (transparent and sticky header) for a development site:
    https://wp.emthrace.org/
    I tried this css (from another post here) but it doesn’t work when I activate header/footer builder. I tried the above class .bhfb-mobile but it still doesn’t work. Could you please help with the css syntax? thank you

    @media only screen and (max-width: 991px) {
    #masthead-mobile {
    	position: absolute;   
    	top: 0;
    	width: 100%;
    	background-color: transparent;
    	
    	}
    	.content-wrapper {
    	padding-top: 0;
    	margin-top: 0;
    	}
    	
    }
    @media only screen and (max-width: 991px) {
        #masthead-mobile > div {
            position: sticky;
            top: 0;
        }
    
        .sticky-header-active #masthead-mobile > div {
            position: fixed;
            background-color: #878371;
    		padding-bottom: 20px;
        }
    }

    gorfeas

    (@gorfeas)

    Same problem here: https://wp.emthrace.org/

    I tried the above solution but it still doesn’t work. Any suggestions?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Sticky menu doesn’t work’ is closed to new replies.