DIVI Navigation Bar details - css

Question

Site URL: http://www.digisalud.org/desarrollo/dona/
Hello!
Please, I am using DIVI Theme and I need to make these settings in the navigation bar:
NAVIGATION BAR:
The PLATFORM button on some laptop screens is shown on the down line of the navigation in screen with size between 1056 and 1346 px.
When you place the cursor on the DONA button or on the PLATFORM button near its corners, the text is shown in white, this should appear in yellow or blue.
I show you the images with the sample of each problem. This site is already in production and I need to close these details with the client. I appreciate the help very much.
Regards
Adriana

Answer 1

At 1280px, for example, there isn't space enough to put all the elements into the same row.
If you inspect all the element's width, you'll see that the menu container must have, at least, 1030px of width to keep all the elements inline.
Obviously, like your menu container width is setted to 80%, when the screens size is, for example, of 1280px, the menu container have a width of 1024px (that, like I said, is not enough).
One solution can be to force the container to cover the entire width in those resolutions.
You can approach this using media queries.
Something like this:
#media(min-width: 1024px) and (max-width: 1366px) {
.container.et_menu_container {
width: 100%;
}
}
Snapshot with the Plataforma button hovered:
P.S: You can also adjust the paddings/margins of the menu elements (logo, menu items, buttons...)