Please change my menu

Hi there,

Please see the code I have and the this image. The middle menu is what it looks like when you hover at the moment, the bottom is how I would like it to look please:

Here is the code I currently have

Code:

#menu .ddsmoothmenu li a {
font-size:13.5px;
color: white;
font-family: Oswald;
text-transform: uppercase;
}
 
.menu_wrapper .menu-container {
background: black;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
 
#menu .ddsmoothmenu li:first-child a {
    padding-left: 12px;
}
 
 
.footer_wrapper {
display: none;
}
 
#menu .ddsmoothmenu li {
padding: 0;
}
#menu .ddsmoothmenu li a {
 
color:white;
font-size:13.5px;
font-family: Oswald;
text-transform: uppercase;
}
 
 
 
#menu .ddsmoothmenu li a:hover {
background: #089ED1;
}
li.current_page_item a:hover {
background: #089ED1 !important;
}
#wrap {
width: 1193px;
}

 

Hi leo!

Please provide us URL of your website.

Thanks,
Praveen

 

http://directory.theliberal.ie

 

Hi,

Try using the below code:
Go to the Appearance > Theme Options > Styling Options
Put code:

Code:

.menu_wrapper .menu-container {
padding: 0px;
}
 
.ddsmoothmenu li a {
padding: 10px 10px !important;
}
 
.ddsmoothmenu li a:hover {
background: #309ed1 !important;
}

Regards,
Sameer

 

Thanks Sameer, but it's not just right. There is still a gap to the left and a white part still appears.

Please see imagepic1.jpg - that is what you have, but I want imagepice2.jpg

Thank you,
Leo

 

Hi,

You can add this code. Here I have added the margin part

Code:

.menu_wrapper .menu-container {
padding: 0px;
}
 
.ddsmoothmenu li a {
padding: 10px 10px !important;
  margin:-3px;
}
 
.ddsmoothmenu li a:hover {
background: #309ed1 !important;
}

Regards,
Sameer Khanwalkar

 

Thank you Sameer - it's almost perfect but the a hover colour goes below the menu - please see image. How can this be fixed please?

Thanks,
Leo

 

Hi Leo,


Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.ddsmoothmenu li a:hover {
  padding-bottom: 8px !important;
}
.ddsmoothmenu li {
  height: 41px !important;
}

Thanks,
Praveen

 

Thank you