Mobile menu transparent over content

[Timmid]

Hi X Theme,

I’m working on a new website and have a question about the drop down of the mobile menu.

On the home page the drop down of the mobile menu goes over the content. But on the other pages it pushes the content down and the menubar get’s bigger. Is it possible to have the same menu dropdown as on the home page on all the pages? So it goes over the content slightly transparent.

The site url is: https://studiomashup.nl/website

Thx for the help.

[rad]

Hi @Timmid,

Thanks for reaching out.

You have to change your custom CSS and javascript remove the .home selector so it will be applied to all pages. Example,

From this

.home .masthead {
    height: 0px;
    position: relative;
    z-index: 999999;
}

to this

.masthead {
    height: 0px;
    position: relative;
    z-index: 999999;
}

Hope this helps

[Timmid]

Hi Rad,

Thx for the reply! The CSS change doesn’t give the effect I wanted. Maybe I didn’t explained it good enough.

I made an image to explain the current situation (left) and the desired situation (right) On desktop view the design is good right now. On mobile I want the background of the menu to stay Blue. And when the drop down of the mobile menu collapse it goes over the content of the page. This is also the case on the home page right now. Other pages the content moves down and the menubar get’s bigger.

[basanta]

Hi @Timmid,

Thanks for updating the thread and clarification!

Can you please try this CSS and let us know if that works.

@media (max-width: 979px) {
.x-nav-wrap.mobile {
    position: absolute;
    width: 100%;
    top: 100%;
}
}

Hope this works!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[Timmid]

Thx so much!

The CSS works great and I will take a look at the resources. I can use some more CSS knowledge and tricks as i am still learning the basics.

[christian]

You’re welcome. Glad it helped.