Button on the menu bar

Support
#1

Hey,
I want to personnalize my menu like this :

i use this code :
#menu-item-78 {
background: #3e4c34;
padding: 1px 10px; //i modified all numbers but the color steel arrived to the topbar//
color: #000;
}

But i didn’t get the good result

The background color arrived intel the topbar .i want to decrease it a little bit exacly like the first pic with the yellow background

Thanks

#2

Hi,

You can try this code instead.

.menu-item-78 span {
    padding: 10px;    
    margin-top: -10px;
    background: #3e4c34;
    color: #000; 
}

Hope that helps

#3

This is what i get

i can’t change the backgroun size even when i delete this 2 lines NO CHANGES:

padding: 10px;
margin-top: -10px;
Thanls

#4

Hello @Fayssal90,

Thanks for updating the thread. :slight_smile:

You need to work with the values for get desired effect. Please try following code:

  .menu-item-78 span {
  padding: 12px 5px 12px;
    margin-top: -15px;
    background: #3e4c34;
    color: #000;
}

To learn more about padding and how you can adjust the values of each side, please refer following post.

https://www.w3schools.com/Css/css_padding.asp

Let us know how it goes.

Thanks.

#5

Hey ,

Sorry but it doesn’t work . i put my website on line : boloni.ma

Can you please give the right code.

Thanks

#6

No one here to do support.i asked that more than 12h

Thanks

#7

Hi there,

You can try adding a class to the menu item that you want to style then target the menu item using the class that you added.

First, you will need to enable the CSS Classes under the Screen Options then you should be able to add a class class to the menu items.

Save the menu then add the CSS code:

.menu-bg a span {
    padding: 15px 10px 15px !important;
    margin-top: -15px;
    background: #3e4c34;
    color: #000;
}

This is assuming that the css class you added to the menu item is menu-bg

Hope this helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.