I like they want my mobile menu looks at the moment (sitting on top of the photo) but when I tap the menu, it pushes the content down to fit in the opened menu. It doesn’t push it down far enough and so it looks wrong. Would there be a way to prevent it from pushing the content down and just let the menu overlay on top of the photo?
Hi there,
Thanks for writing in! Please try adding the following code in the Theme Options > CSS:
@media screen and (max-width: 979px) {
.x-navbar {
position: absolute;
width: 100%;
}
}
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.
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/
Hope this helps!
Great! Thanks!
@brockburwell Did you updated the thread? When I opened this ticket I saw a question about changing menu color on specific pages. But looks like you have updated the thread. In case you want to change mobile menu color on selected pages, please try out below solution.
To change menu color on selected pages, please add following CSS under X > Theme Options > CSS:
.page-id-88 .x-btn-navbar.collapsed {
background-color: #fff;
}
.page-id-88 .x-btn-navbar {
color: #000;
}
In above code you need to replace page-id-88 with id of page on which you want to make the necessary changes.
To find Page/post id, please take a look at following tutorial.
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.
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/
Thanks.
Thanks! Last question!
For my homepage, it changed the way my Revolution Slider looks at the top. Now it’s much thinner than it originally was. Is there anyway to exclude the homepage from what we just added?
Thanks!
Hello There,
Are you referring for the navbar? To exclude the homepage, you may need to update the code given by Nabeel and use this instead:
@media screen and (max-width: 979px) {
body:not(.home) .x-navbar {
position: absolute;
width: 100%;
}
}
We would loved to know if this has work for you. Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.