advent12

https://docs.themeisle.com/article/33-how-to-link-menus-to-sections-in-zerif

Helpful.

/*Changes menu underline from red to black */

.entry-title a:after {
height: 2px;
background: black;
width: 50px;
}

.listpost-content-wrap .entry-title a:after {
background: black;
}

ul.nav > li.current_page_item > a:before {
height: 2px;
background: black;
}

.entry-title:before {
height: 3px;
background: black;
}

Worked for me.

Couple of ideas.

/*centers menu*/

@media screen and (min-width: 767px) {
nav#site-navigation {
float:none;
margin: 0 auto;
display: table !important;
}

/* centers logo but puts menu underneath, not currently in theme*/

.navbar-header.responsive-logo {
text-align: center;
width: 100%;
}

website

Figured it out. Hope it helps someone. Cheers.

/*Enlarge grey line for nav menu*/
.header.header > .navbar {
box-shadow: 0 40px 0 0 rgba(128,128,128,1.0) !important;
}

Figured it out in case anyone wants code.

/*Enlarge grey line for nav menu*/
.header.header > .navbar {
box-shadow: 0 40px 0 0 rgba(128,128,128,1.0) !important;
}

Did not work.

I found this to have the effect however the bottom is shadowed and I’d prefer solid.

/*Enlarge grey line for nav menu*/
.header.header > .navbar {
box-shadow: 0 25px 11px 0 rgba(128,128,128,0.55) !important;
}

What I’ve figured out:

/*Enlarge grey line for nave menu*/
.header.header > .navbar {
box-shadow: 0 25px 11px 0 rgba(128,128,128,0.55) !important;
}

/*Move menu down to grey border*/
#site-navigation ul {
margin-bottom: -30px;
}

Can the bottom be made solid rather than shadowed?

Thank you, but this had no effect except the browser took long to load…scared me.

I know, I tried that and it created the post page as my new home page

site.com

and my home page as

site.com/sample-page.

And the site.com latest post page was not in my nav menu…

So, would I delete the home page #1? (now site.com/sample-page.) How would I make the site.com page my home page?

What I’m saying is that it creates 2 home pages. One is redundant but searchable, the other not on the nav menu.

Thanks for pointing this out! I will post code, hope it helps others.

Code I found:

/*Move menu down to blue border*/
#site-navigation ul {
margin-top: 40px;
}

/*centers menu*/
@media screen and (min-width: 767px) {
nav#site-navigation {
float: none;
margin: 0 auto;
display: table !important;
}
}

I have the following code for the logo…perhaps it interferes.

/* Increases header area to make room for larger logo*/
#main-nav {
min-height: 100px;
}

/* Increases logo size*/
a.navbar-brand {
height: 100px;
padding: 0 15px;
width: auto;
}

.navbar-brand > img {
margin-left: -110px !important;
margin-top: 10px !important;
}

.navbar-brand > img {
margin-top: 0 !important;
height: 100px !important;
width: 480px !important;
}

Thanks very much.

It has the desired effect on mobile and laptop. On tablet however it puts the logo on top of the menu, skewed left.

Is it possible for the logo and the menu to exist side by side?

Thanks for the plugin info!

Is it not possible to move the menu (home, company, service etc) down to the bottom of the blue header? Or centered at the bottom of the header? Using css?

Thanks!