Hi there.
I am getting a strange result on mobile. the navigation is partly cut off.
Can you let me know how to fix this please.
Website - https://executorsolutions.co.uk/
Many thanks
p.s. I’d attached an image but I am not given the option too.
Hey there
Please apply this css on your site, add it in appearance > customize >additional css:
@media (max-width: 991px){
.main-navigation .menu a {
padding-bottom: 0px;
}
.nav-bar .module-group {
z-index: 99;
}
}Thank you very much for for this.
This seems to have removed the background colour from the menu. BUT, we need a background colour in to make the menu visible.
The attached 2 screen shots show the effects of the code showing:
- The menu expanded on mobile (here no background colour)
- Sub menu within the menu expanded on mobile (here we see background colour)
We need the background on all menu states please.
Thank you for your help.
p.s. i can’t seem to attached images in the way I could before, essential functionality when conveying an issue on a website?
See screen shots from my phone here …
Please add this code, it will fix your problem:
@media (max-width: 991px){
.nav-bar .module-group {
z-index: 99999;
background: #fff;
}
}Many thanks
Unfortunately this still isn’t working …
Please see screen shots.
On mobile when you click on the hamburger menu, the menu is cut off, looks like it sits behind the first element on the page. You can only see half of ‘How we can help’ and none of the elements on the drop down menu. We can’t see the ‘About Us’ and ‘Contact us’ elements
When you click on the drop down arrow next to ‘How We Can Help’ you can see the elements in the sub menu that has opened (the elements within the ‘How we can help’ section) but still can’t see other elements of the menu, the ‘About Us’ and ‘Contact us’ elements.
hey there
May I see the code I provided in the additional CSS? I believe it was not properly added because I can’t see it at all
Hi
It didn’t work, and caused problem. So I took it out again.
Here is the code in additional CSS …
/* New button styles /
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
padding: 15px; / Increase distance between text and border /
width: 100%; / Make the button full-width /
font-size: 1.5em; / Increase text size /
color: #ffffff; / White text */
}
/* Remove Search from Nav */
#site-navigation .search-widget-handle {
display: none;
}
/* WP Forms Button formatting*/
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #3260A9 !important;
border: 0px solid #6D5856 !important;
color: white !important;
}
/* WP Forms Button HOVER formatting*/
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit:hover] {
background-color: #ffffff; /* ESBlue background */
}
/* Remove footer credits */
.footer-credits { display: none; }
/* Shapeley Client Logos Control Sieze */
.shapely_home_clients li img {
max-height: 80px;
}
/fix menu being behind hero/
.main-navigation .menu > li ul {
z-index: 101;
}
/* Body font colour */
body { color: #505050; }
/* Heading font colour */
h1, h2, h3, h4, h5 {
color: #3260A9;
}
/* Grey Bullets */
.entry-content ul li{
font-weight: bold;
color: #8a8a8a;
}
section.content-area.pt0 {
padding-top: 0px !important;
}
/Remove Page title/
header.entry-header {
display: none;
}
/Menu font size/
.menu-item a {
font-size: 16px!important;
}
/increase header height and top padding to bring down logo and navigation/
nav#site-navigation {
height: 14vh;
padding-top: 3vh;
}
/remove gap between bottom element and footer/
article footer.entry-footer {padding: 0px;}
section.content-area.pt0 { padding-bottom: 0px; }
.hentry{
margin-bottom: 0px;
/fix menu on mobile/
@media (max-width: 991px){
.nav-bar .module-group {
z-index: 99999;
background: #fff;
}
}
Thanks
Thank you!. That has worked.
Nice to hear 
Have a nice day