Adding Padding to the right of the .x-navbar .desktop .x-nav

[ActorMike]

I can’t figure out how to add padding to the right side of the background behind the navigation bar. It has some padding on the left side but abruptly ends. Everything I’ve tried puts spaces between the menu buttons. Screenshot below.

.x-navbar .desktop .x-nav > li > a {
background-color: rgba(9,33,77);
font-size: 20px;
text-shadow: 2px 2px #000000;
}

[ruenel]

Hello @ActorMike,

Thanks for writing in! To better assist you with your issue, please provide a URL of the page where we can check your navigation bar. In the meantime, you can also go to Cornerstone > Theme Options > Headers > Links (Alignment) and adjust the side alignment for your navigation menu items.

Best Regards.

[ActorMike]

https://merchantlaundromat.com/

I’m not talking about the alignment. I already aligned it where I want it. Look at the photo above. There is no padding on the background next to the search icon, it just abruptly ends.

PS did you ever get the classic counters working? It’s been 4 months since you responded here- Classic Counters Not Fixed in over 6 weeks!

[ruenel]

Hello @ActorMike,

I can see that you have added this custom CSS:

.x-navbar, .x-navbar .sub-menu {
    background-color: hsla(210,29%,24%,0) !important;
}

.x-navbar .desktop .x-nav > li > a {
    background-color: rgba(9,33,77,0.65);
    font-size: 20px;
    padding: 20px 0px 0px 0px;
    text-shadow: 2px 2px #000000;
}

The code above you have added has created a background color for the navigation menu items only. By default, the search icon do not have a padding on the right so that it will be aligned with the elements on the topbar and in the section area. You will have to add additional custom CSS to be able to resolve the padding. Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

In your case, you may have something like this:

So, you can copy the circled CSS code on the right side and change the right padding value from 0 to 10 pixels.

As for the Classic Counters, a fix has already been made. We do not have an ETA for the next update release though. You may need to watch out for the rolling out of the next update.

Hope this helps.