There is a 1 pixel white outline around the main menu dropdown. Sorry, can’t do a screenshot right now.

One more questions is it possible to center the drop down under the main menu item above?

Hi, that worked, but now the white outline is back, any way to remove that? Thanks!

Hi Nikko,

I tried that and it did not move the main nav text. Is it possible there is some other code conflicting with this new code?
Here is everything else I have added:

.html_header_top.html_logo_center .logo {
left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.av-main-nav > li > a {
padding: 65px 30px;
}
#top .av_header_transparency .avia-menu-fx {
width: 55%;
left: 23%;
}
.sub_menu li {
border: none;
}
#scroll-top-link {display: none;
}
#top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
height: 37px;
display: inline-block;
}
#top #header.header_color.av_header_transparency .av-main-nav > li:hover > a span.avia-menu-text {
border-bottom: 2px solid;
}
#header_meta {
position: absolute;
right: 0;
border-bottom: 0;
padding-top: 20px;
}
@media only screen and (max-width: 767px) {
#header_meta {
width: 100%;
padding-top: 0;
}
#header_main {
padding-top: 20px;
}
}
#top .av_header_transparency #header_meta {
border: none;
}
#top #header.header_color.av_header_transparency .av-main-nav > li.current_page_item > a .avia-menu-text {
border-bottom: 2px solid #fff;
}
span.avia-menu-fx {
display: none;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h1{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h3{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h4{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h5{
text-transform:none!important;
}
#top .dropdown_widget .buttons .button {
background: #666;
}
@media only screen and (max-width:959px) and (min-width:768px) {
.home #header #avia-menu {
position: relative;
top: 120px;
}
}

Hi, the body font looks better, however it’s not the weight I wanted to use. Please see the attached screenshot outlining what I am trying to do. The font drop-downs do not list the different weights. Also, the Header styles are automatically making headers all caps and I would like to turn that off. To simplify, can we just assign the the font/weights to the following 3 font styles?

H1
Monserrat Bold
#009955
56pt

H2
Monserrat Regular
#282828
34pt

Body Text
Monserrat Light
#282828
19pt

I’m including this screenshot to show you what I am trying to make it look like.

Hi Jordan,

I have double checked and I followed the directions correctly (I think). The fonts are still not showing up in the drop down menu areas in the fonts settings areas. Any more ideas?

Ok, active state underline is now back, BUT this has re-introduced the problem of the underline not being the same width of the text (one of my original problems). Is there a way to have the underline always match the width of the text and have the active state underlined?

That looks perfect in mobile view, thanks. I am still seeing the horizontal line under the secondary menu in desktop view. Please see the attached screenshot. To be clear, I would like to remove the line in both the desktop view and the mobile view. Is there a way to do this?

Thanks!

• This reply was modified 7 years, 1 month ago by ScottYetter.

Hi Rikard, Thanks, that mostly worked. As you will see in the attached image, part of the line is still there, any thoughts?

I also noticed that this has made changed the view in mobile. Now in mobile the logo is cut off. Can we move the Secondary nav to the top (above the logo) in mobile view only?

Please see the 2 attached images:

Thank you!

I adjusted the top code you supplied to push the navigation further down the page (added ’35px’), like this:
.av-main-nav > li > a {
padding: 35px 30px;
}
Problem is now the underline is on top of the words in the nav, not underneath. Is there a way to have the line just move with the text? Please see my link below.

Also, the second code you provided helped in that it got the lines closer to being the same width of the words. Unfortunately, on “Implementation” (see link below), it is not even close. Is there a way to have it exactly match the width of the word?

Thank you!

That worked great, however, now the line underneath each hover menu item or the active menu item extends much further past the text (horizontally). See the attached image. I would like the line to be the exact width of the menu item. Is there a way to do that?

Sure, provided what you requested in private content below.