[MattHollParticipant]

Hello.

I added this code here to format the navbar. When on a smaller monitor, the menu wraps to a second line and I want that second line centered. See first attachment for how that looks.

body .x-navbar .x-nav-wrap.desktop .x-nav li {
float: none;
display: inline-block;
}

body .x-navbar .x-nav-wrap.desktop .x-nav {
width:100%;
text-align:center;
}

The problem there, though, is that it messed up the formatting on my dropdown menus. Please see second attachment.

I used the following code earlier in the CSS to format those menus. I got rid of a frame around them, got rid of those rounded corners, etc. I would like the menus to go back to looking like the third attachment. If I delete the code for centering the wrapped menu that is above, that fixes it, but then the menu does not center when it wraps.

Here’s the menu customization from earlier in the CSS:

.x-navbar .desktop .sub-menu {
padding:0;
}

/* individual color controls for each nested level of submenu */

/* first level submenu */

.x-navbar .desktop .sub-menu a {
color: rgb(32, 28, 64);
}

.x-navbar .desktop .sub-menu, .x-navbar .desktop .sub-menu a {
background-color: rgb(224, 219, 194);
font-size: 14px;
}

/* sub menu background color and text color on hover */
.x-navbar .desktop .sub-menu a:hover {
background-color: rgb(90, 100, 124);
color: #f2c054;
}

/* second level submenu */
.x-navbar .desktop .sub-menu .sub-menu a {
color : rgb(32, 28, 64);
}

.x-navbar .desktop .sub-menu .sub-menu, .x-navbar .desktop .sub-menu .sub-menu a {
background-color: rgb(200, 196, 174);
font-size: 14px;
}

/* sub menu background color and text color on hover */
.x-navbar .desktop .sub-menu .sub-menu a:hover {
background-color: rgb(90, 100, 124);
color: #f2c054;
}

So, my question is, is there a better way to write that CSS that I posted up top to center the navbar menu when it wraps to a second line? I do NOT want it wrapping on large monitors, but for smaller monitors it should wrap as it currently does and be centered on both lines.

The site is here:

http://www.hrvatskohomebrewprvenstvo.beer/

Any help is greatly appreciated.

-M

[LelyModerator]

Hi M,

Please add the following CSS for the submenu to remove round corners like on screenshot 3

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu, .masthead-stacked .x-navbar .desktop .sub-menu {
    border-radius: 0;
}

If you want those CSS to work on certain size only, we can use media query like below:

@media (min-width: 980px)  and (max-width:1100px){
  /*Add your CSS here and feel free to adjusr min and max value*/
}

Now, no need to position each 2nd level submenu. Please check the following CSS:

.masthead-stacked .x-navbar .desktop #menu-item-1734 .sub-menu .sub-menu {
    left: auto;
    right: calc(100% + 30px);
}

You may update above CSS to the following so it will cover everything:

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    left: auto;
    right: calc(100% + 30px);
}

Hope this helps.

[MattHollParticipant]

Thanks for the help!

There are still some formatting issues I’d like to fix if possible, please.

Please compare the first and second screen capture attached here. The second one is the way I want it to look. The way it is now, that blue-grey background color does not fill the entire dropdown item. I want it to fill that all the way.

Also, there is a gap, and open space between the first dropdown and second drop down. I would like to get rid of that space so they are touching.

Any help is greatly appreciated. Thanks!

[RadModerator]

Hi there,

Please change this CSS

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    left: auto;
    right: calc(100% + 30px);
}

to this

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    left: auto;
    right: 100%;
}

And please remove this

body .x-navbar .x-nav-wrap.desktop .x-nav li {
    float: none;
    display: inline-block;
}

Thanks.

[MattHollParticipant]

Thanks for the help, but if I remove this:

body .x-navbar .x-nav-wrap.desktop .x-nav li {
float: none;
display: inline-block;
}

Then the second line of the menu when it wraps is not centered, like in the attachment. I want that second line centered.

[ChristianModerator]

We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. Thanks for understanding.

[Author]

Posts