Center one menu item to create a button

[rmniemela]

I’ve tried all kinds of css to try to center one menu item to create a button on the menu, but for the life of me, can’t find the css that will center the text on the button. Tried different float options, flexbox settings, but nothing seems to work.

Current css added:

/* Donate menu item different colour */
#menu-item-1281 a {
background-color: #91b03e;
color: white !important;
text-align: center;
}

 

Home

[scrambler]

The problem is not the centering but the padding.

When you add extra padding spacing with the Menu options, it only adds it on one side.

remove your centering CSS as it screws up your mobile menu, and remove the extra spacing you entered in the menu options, and instead add the rule below to the theme Global Custom CSS Box with the value that work for you

@media(min-width: 768px) {
.menu-primary .wvrx-menu-container li a{padding-right:2.7em;padding left:2.7em;}
}

FYI, regardless of the method, adding padding causes the menu to split on several lines as soon as the browser size gets smaller

[scrambler]

Actually I may have a way to make the spacing of the menu items responsive so it scales with the browser size.

Try the following

Remove the value you put in the menu option “desktop menu spacing” (0)

remove your centering CSS

Post back so I can fine tune the CSS to create a spacing proportional to the extra space available for the menu bar

[scrambler]

Once the spacing  is remove, the rules below should create a proportional space

@media(min-width: 768px) {
padding-left: calc((100vw – 240px – 582px – 150px)/14);
padding-right: calc((100vw – 240px – 582px – 150px)/14);
margin-left:10px;margin-right:10px;
}

As you reduce the browser size, the spacing should reduce to delay when the menu will have to drop below the image

We can tweak if necessary

[rmniemela]

Thank you! I hadn’t realized what the setting in the Menu options did. This got me going in the right direction.

If you add the padding lines below, the menu is really spread out with way too much padding between menu items so it wraps onto two lines.
padding-left: calc((100vw – 240px – 582px – 150px)/14);
padding-right: calc((100vw – 240px – 582px – 150px)/14);

However, using the code below, it breaks the menu into two lines once you get to a 824px viewport. So unless there’s a quick fix with the calc lines, I’m going to go with the following:

@media(min-width: 768px) {
.menu-primary .wvrx-menu-container li a {
margin-left:5px;margin-right:5px;
}
}

@media(max-width: 824px) {
.menu-primary .wvrx-menu-container li a {
margin-left:0px;margin-right:0px;
}
}

If ever I decide to add an additional menu item, though, I’ll run into the same problem with a line break, so something to keep in mind.

[scrambler]

If you want me to tweak the responsive CSS so that it does not cause the line break, I need the rule in place and a link.

If you are happy with several @media rule, it is fine too

[rmniemela]

I’m good with this solution. Thank you!

[Author]

Posts