How to ensure it overlays all content?

  • Resolved halopend

    (@halopend)


    6 years, 9 months ago

    I’m attempting to use mystickymenu with astra, though I imagine this would apply to any theme, and have difficulty that some elects in some webpages seem to overlay the content in my header.

    Not sure if this is a problem with astra, the elements in beaver builder that overlay my header or what but I was wondering if there is a way to guarantee the header overlays all content using the style section.

    I’m using .main-header-bar as my sticky class just incase that isn’t what I should use for astra.

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

  • Try sticky class #masthead or .site-header

    It’s important that all the elements you want to be sticky are inside selected element (selected with sticky class)…

    Thread Starter halopend

    (@halopend)

    Ah! Thank you!! I wasn’t sure where to look when digging in the code but using #masthead fixed my issue. I have essentially no experience with html coding so I really wasn’t sure where to look, but that did grab all the elements including the divider bar at the bottom which I didn’t realize was missing till using #masthead fixed it.

    I think as a next step I’d like to figure out how to get the head style to change automatically based on when it’s at the top of the screen vs a scrolled down sticky.
    Any idea how to trigger it with the style section code?

    I can see from the code:
    <header class=?"site-header header-main-layout-1 ast-mobile-header-inline" id=?"masthead" itemscope=?"itemscope" itemtype=?"https:?/?/?schema.org/?WPHeader" role=?"banner" style>?…?</header>?<div id=?"mysticky-wrap" style>

    that I want to trigger header-main-layout-2 for the sticky version of the menu while having it as header-main-layout-1 by default at the top of the page but I’m really unsure of the notation I’d use to trigger it when scrolled down.

    Any idea how to accomplish that?

    This is another question and it should be asked in another topic, I will mark it as resolved…

    However you can hide menu .header-main-layout-2 with display-none, than when it’s sticky show it with .header-main-layout-2.myfixed

    .header-main-layout-2 {display:none;}
.header-main-layout-2.myfixed {display:block;}
    • This reply was modified 6 years, 8 months ago by damiroquai.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to ensure it overlays all content?’ is closed to new replies.