Page content visible under header

[birdycom]

Hi, I’ve made the top of the homepage visible under the standard header, using this code (only on the home page):

.page .masthead {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

It gets the job done, but when the mobile menu is active it doesn’t push the page down while showing the menu items, you can see the problem here:

http://dev18.serica.se

Instead the menu items layers on top of the image. On all other pages it works fine, but the code is not active on those pages.

Any suggestions on the best way of solving this?

Best,
Petter

[jade]

Hi there,

The default position of the header is relative to the page. If this is the setup, the mobile menu will push the content down the page when you click on the burger menu.

Since you added the code:

.page .masthead {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

this sets the header’s position absolute to the page that is why the page content does not get pushed down and shows up above the content below it.

You can read more about the CSS position property here:

https://www.w3schools.com/css/css_positioning.asp

What I can suggest is that you can set the desktop menu to have an absolute position through media queries then set the background color of the header area to a color close to the top area of the image below the menu. It should be something like this:

@media (min-width: 980px) {
    .home .masthead {
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
}

@media (max-width: 979px) {
    .home .masthead {
        background-color: #ECF5D8;
    }
}

Lastly, notice that I updated .page .masthead to .home .masthead. This is because you mentioned that you are trying to apply the CSS to the homepage only and the class .home is more appropriate to target the homepage.

Hope this helps.

[birdycom]

Thanks!

I guess there is no way to condition the background color of the navigation area, wether the mobile menu is open or not … using only CSS? (Even if I’m using a child-theme I prefer to make as few changes as possible to the theme itself.)

Since I want the image to start from the top regardless of the mobile menu or not I did some changes:

.home .masthead {
    position: absolute;
    right:0;
    left:0;
    top: 0;
}

@media (max-width: 979px) {
  .x-navbar-inner { background-color: rgba(255,255,255,0.4); }
}

I guess I can’t condition this bg-color change to when the mobile menu is open/active (using CSS)?

Best,
Petter

[christian]

Hey Petter,

Regretfully, there is no class that is generated for the .x-navbar-inner so it’s not possible to change its background when the mobile menu is active.

[birdycom]

Ok. Thanks!

[jade]

You’re welcome.