Add Horizontal Line Under Menu

hi,

how can i add a horizontal line under the menu? how can i adjust its color? pixels?

thanks,
rex

 

Hello rex!

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

Code:

body.home.blog ul#menu-menu-1 {
border-bottom: none !important;
}
ul#menu-menu-1 {
border-bottom: 1px solid red;
padding-bottom: 20px;
}

Thanks,
Praveen

 

hi praveen,

this works, but with a couple of resulting issues that i'd like to resolve.

1. for some reason this code added extra padding below the main menu on the homepage. we need to remove that. please see screenshot.

2. the horizontal line does not extend the full width with the default template, but it should. it looks odd because the line extends above the right column, but not all the way. please see screenshot.

thanks,
rex

 

Hi rex!

Use the css code given below.

Code:

body.home.blog ul#menu-menu-1 {
padding-bottom: 0 !important;
}
#menu .ddsmoothmenu {
width: 130%;
}

Thanks,
Praveen

 

awesome, praveen, thanks! also, for future reference, 135% seems to span the width better than 130%, i.e.:

#menu .ddsmoothmenu {
width: 135%;
}