Background color behind menu item

[outpost33]

Hi,

I’m adding some custom css to the navbar in order to place a background color behind a menu item. I don’t want the background color to fill the height of the navbar, I just want it around the text. I used this css:

.x-navbar .x-nav-wrap .x-nav > li > a {
background-color: #000;
display: inline;
padding: 5px;
}
.x-navbar .x-nav-wrap {
padding-top: 32px;
}

The result looks like this, which is what I want:

However, the css I’m using prevents me from making customisations I want in the drop-down mobile menu. For example, I would to change the size of the mobile menu font or center the text like this:

.x-navbar .mobile .x-nav li>a {
text-align: center;
}

But with the first css applied, the second css doesn’t work. Sorry, my css skills are a little basic!

Please login to my site if you need to as it’s under construction. Many thanks for your help!

[jade]

Hi there,

Please try updating:

.x-navbar .mobile .x-nav li>a {
    border-color: transparent;
    text-align: center;
}

to

.x-navbar .mobile .x-nav li>a {
    border-color: transparent;
    text-align: center;
    display: block;
}

Hope this helps.

[outpost33]

Thanks, that’s much closer - now the mobile dropdown menu looks like this:

I would like the background color more tightly around the text left and right, as in the desktop menu pictured in my first post.

[paul.r]

Hi,

Please replace css code with this.

.x-navbar .mobile .x-nav li>a {
    border-color: transparent;
    text-align: center;
    display: inline-block;
}

.x-navbar .mobile .x-nav li {  
    text-align: center;  
} 

Hope that helps.

[outpost33]

Thanks, that’s better. I adapted the css to add some padding to the background color, and now it works:

.x-navbar .mobile .x-nav li>a {
  border-color: transparent;
  font-size: 16px;
  display: inline-block;
  padding: 3px 25px 3px 25px;
}
.x-navbar .mobile .x-nav li {  
  text-align: center;
}

Many thanks!

[rad]

Hi @outpost33,

Thanks for sharing, as for adding the code in the forum, you can always add it between these

```

//Code here

```

And it will be converted to this

//Code here

Cheers!

[outpost33]

Thanks, always wondered how that worked!

[rad]

You’re most welcome!