Header 1 Issues – black bar

[noble51]

I’m afraid I’m hitting you with too many issues in this one request – sorry.

1) I’m trying to use header 1 the centered logo option.
I’m dealing with a HUGE LOGO from my client. (Grrrr)
First – does “Header 1” allow the logo to be reduced and put in the sticky header when you scroll down?
The other headers seem to allow this.

2) Then I wanted to put a color in the background of the main navigation – go check it out – the blue nav/menu background shows up, the pops to black then you can not see the navigation menu words????.

3) I’m also getting a strange black bar above my main navigation???

4) AND last night the navigation in the main menu was on the left side like your example – today, it is on the right side????

Here is the custom css I’m using that I found on other forum suggestions:

#header-section > #main-nav {
    background: none repeat scroll 0 0 #1a80b6;
}

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-1 .is-sticky #header.sticky-header, .ajax-search-wrap {

background: url(http://ng-sandbox.com/CMS/wp-content/uploads/2014/02/header_bg1.png);
background-repeat: repeat-x;
}

See my screen shot to see details.

Here is url of site: http://ng-sandbox.com/CMS/

Thanks in advance!

Paul

**** I fixed the logo squish issue.

Still would like to know IF it reduces down and stays up in the top left in sticky menu in Header Version 1.

[Swift Ideas – Ed]

Hi there,

1) Headers where the logo is on the same line as the menu allow this, else only the navigation is stuck.

2) Try this custom css:

nav .menu > li.menu-item > a, #menubar-controls a, nav.search-nav .menu>li>a, #main-nav .header-right ul.menu > li > a {
color: #fff;
}
#header-section .is-sticky #main-nav.sticky-header {
background: #222;
}

3) Your header background image isn’t large enough, so the black bar is what isn’t covered. This custom css should sort that:

#header-section #header {
padding: 20px 0;
}

4) Use this custom css:

nav#main-navigation ul.menu {
float: left;
}

Hope that helps!

– Ed

[noble51]

Ok, I’m a bit confused.

Are you saying header 1 The logo will not show up in the sticky menu?

Also here is the code I have in the css area NOW:

nav .menu > li.menu-item > a, #menubar-controls a, nav.search-nav .menu>li>a, #main-nav .header-right ul.menu > li > a {
color: #fff;
}
#header-section .is-sticky #main-nav.sticky-header {
background: #1a80b6;
}

#header-section #header {
padding: 20px 0;
}

nav#main-navigation ul.menu {
float: left;
}

#header-section > #main-nav {
    background: none repeat scroll 0 0 #1a80b6;
}

The main bar still goes from the blue bar then snaps to transparent.
Then when I scroll down to see the sticky menu it displays correct color.

What am I doing wrong?

http://ng-sandbox.com/CMS/

[Swift Ideas – Ed]

That is correct.

Ok, try adding this extra custom css:

#header-section #main-nav {
background: #1a80b6;
}

That should be it!

– Ed