Menu bar drop down list won't span over background

Answered here:

https://www.ads-software.com/support/topic/menu-bar-drop-down-list-wont-span-over-background?replies=4&view=all

@usetit, you can use @wpyogi code that’s OK, as he said deleting

.main-navigation ul {
    text-align: center;
    text-indent: 2px;
}

and putting in place:

.main-navigation ul {
    display: table;
    margin: 0 auto;
}

and possibly change only what he said
( .main-navigation li {margin-right: 4em;} ) in
.main-navigation li {margin-right: 1rem;}
(or 0.8rem;)

That’s if you want to keep the text centered in menu.
In the original theme text float standard to the left and that ugly indent doesn’t exist, so you can have more space if you ONLY completely remove what you’ve added
( {text-align: center; text-indent: 2px;} in .main-navigation ul )

I hope you are doing this in theme’s CSS custom area or in the theme’s child-theme.
Another simply solution is: don’t list the parent menu item with a sub-submenu as the last one.

I hope you don’t mind me adding my 2 cents worth here. There is a “.site” rule on the #page div which if you change overflow from hidden to visible allows the sub menu to show.
The downside is that there is a yellow band on the heading which is currently being hidden by the overflow setting which will need looking at.
adding
#page.site{overflow:visible;}
to the custom css should at least show the submenu items.
Hope this helps

@martingbedwards, In addition to the yellow band – going outside the content isn’t a solution, the dropdown menu should be visible into the content. Also, in that way it would not be visible in mobile devices or smaller screens.
Two or three good solutions have already been described, from restore the menu as it is in original theme or move the menu item, to the code written above.

@tizz Ok, sorry about that, just trying to be helpful.

@martingbedwards, it’s OK, no problem.

@martingbedwards thank you kind sir!It works wonderfully! @tizz thank you for your input as well, Ive fixed the header and its working fine on mobile devices as well as standard monitors.

You are very welcome! Glad to be of assisstance.

Ive fixed the header and its working fine on mobile devices as well as standard monitors

@usetit, I’m sorry to tell you but it isn’t true. It doesn’t work well on cell phones, tablets and small screens, and you’ve messed up with header, but if you’re satisfied, we all are satisfied.

@tizz I appreciate your concern, thanks! I work at a office with many different models of tablets and different size monitors and different mobile phones. And as far as I can tell they all show it perfectly fine. From asus, to dell, from cricket to apple, its working fine. Thanks for your attempt to help though its greatly appreciated. : )