Navigation Bar on Mobile

Hey,

I’m using Moesia Pro on this website: stphouse.com/dev.

I have problems with the navigation bar: it covers the welcome area on pages (screenshot).

I want to set it to be above the welcome area, how can I do it?

Another thing is the opacity: I want to make it not transparent when responsive. On big screens I want it to keep the opacity but on mobile it looks bad (screenshot).

I also want to change the hover color of the link from the current blue to grey when on mobile.
I tried this options (1, 2) but they didn’t work.
This code didn’t work too:

@media only screen and (max-width: 600px ) {
    .main-navigation a {
	color: #000;
    }
    .main-navigation a:hover {
	color: #757575;
    }
}

Can you help me?

Thanks in advance,
Hadas

Hi,

  1. You can move the welcome-info a bit down to avoid the menu to cover the text on mobile with this Custom CSS:
@media only screen and (max-width: 600px) {
.has-banner .welcome-info, .has-video .welcome-info {
    top: 100px !important;
}
}
  1. You can make the top-bar not transparent on desktop with this Custom CSS:
@media only screen and (min-width: 1024) {
.top-bar {
    opacity: 1 !important;
}
}
  1. Your CSS seems to be correct, but maybe you have to add !important after the color code, so please try this Custom CSS instead:
@media only screen and (max-width: 600px) {
.main-navigation a:hover {
    color: #757575 !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

So i managed to make the top bar not transparent on mobile, using this:

@media screen and (max-width: 991px) {
    .is-sticky {
	background-color: #fff ;
	color: #000;
	opacity: 1;
    }
    .sticky-wrapper {
	background-color: #fff ;
	color: #000;
	opacity: 1;
    }
    .top-bar {
	background-color: #fff;
	opacity: 1;
    }
}

Now I just need help with making it above the welcome area (example), and not on top of it (screenshot of now, headling is hidden by the menu).

Thanks!
Hadas

Hey, Thanks for the quick response!
the code didn’t work:

@media only screen and (max-width: 600px) {
.has-banner .welcome-info, .has-video .welcome-info {
    top: 100px !important;
}
}

the text just goes down in an odd way and then goes back up. WHen I open the menu it still hides the text.
I want all the page to move down when the menu opens, not only the text - all the welcome area.

Thank you!
Hadas

Hi,

The menu when it’s opened will always cover the area below it, but you can add more top space to the site-header with this Custom CSS:

@media only screen and (max-width: 768px) {
.home .site-header {
    padding-top: 50px !important;
}
}

Please let me know how it works.

Best Regards,
Csaba

Ok, thanks. that helps also :slight_smile:

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba