Navbar extend bar across page and behind logo

The layout is based on the Bootstrap 2.3.2 grid and can be confusing at first.

There’s a snippet to centre all the header items that will get you started.

p.s. read also How to Customize Customizr if you’ve never used a functions.php in a child theme before.

Thanks @electricfeet! I actually visited that snippet and even posted there asking for help. I can’t seem to find information to extend a navbar across the page and behind the logo. Almost a seamless ribbon look. Any idea how I can do that?

I’m not sure I know what “a seamless ribbon look” is.

Start with that snippet. Then give us a link to the site and a better explanation of what you want to do—maybe with a mockup image or a link to a similar site.

I have a mockup image of what I’d like to do. But I’m not sure how I can share it with you. Any suggestions?

If you have an active site, just upload it and post the link here.

Otherwise, Google comes up with https://snag.gy/

Before the actual header is requested and rendered, every page runs a function called __before_header. Provided that you know how to create your “seamless ribbon look” element, you can hook it before the header with this command, which you should add in your child theme’s functions.php:

add_action ('__before_header', 'content_before_header');

The line above tells WordPress: every time you run __before_header I want you to run a function called content_before_header. Of course, we need to define that function, like this:

function content_before_header() {
	$my_custom_content = '

	<!-- put your HTML and/or php code here -->

	';

	// next, I will wrap and echo to the page whatever you have put
	// in the variable above. Adding row-fluid class to the container
	// i'm making sure the theme will span the content across all
	// the width of the page

	echo('<div class="row-fluid">'.$my_custom_content.'</div>');

	// if you want to further customize the look of this container
	// you might also consider adding an id to it, as in:
	// class="row-fluid" id="some-unique-id"
	}

I’m hoping to make something simple like this:
https://snag.gy/44Rjp.jpg
I know it is just a small mockup, but I am trying to illustrate that the navbar extends across the page and behind the logo.

Currently I have:

.navbar.notresp .nav > li > a {
border:             1px solid #F28233;       /* Add a border */
border-radius:      1px 1px 1px 1px;        /* No Rounded corners */
color:              white;                  /* White text */
background-color:   #F28233;                  /* Change black */
background-image:   linear-gradient(to bottom, grey, dark orange);    /* Change grey, black */
background-image:   -webkit-linear-gradient (top, grey, dark orange); /* Change grey, black */
background-repeat:  repeat-x;               /* Add shading */
}
.navbar.notresp .nav > li > a:hover {
border:             1px solid #F28233;       /* Add a border */
border-radius:      0px 0px 0px 0px;        /* No Rounded corners */
color:              white;                    /* Red Text on hover */
background-color:   #F28233;                  /* Change black */
background-image:   linear-gradient(to bottom, grey, darkorange);    /* Change grey, black */
background-image:   -webkit-linear-gradient (top, grey, darkorange); /* Change grey, black */
background-repeat:  repeat-x;               /* Add shading */
}
/* Shade the current selected menu item */
.navbar.notresp .nav > li.current-menu-item > a, .navbar.notresp .nav > li.current-menu-ancestor > a {
color:              white;                 /* Yellow Text on hover */
background-color:   black;              /* Change darkgreen */
background-image:   linear-gradient(to bottom, darkorange, grey);    /* Change darkgreen, #9DB67E Light Green */
background-image:   -webkit-linear-gradient (top, darkorange, grey); /* Change darkgreen, #9DB67E Light Green */
}

/* Variable number of floating elements */
.navbar-wrapper .navbar.notresp .nav        {
float:              none;
width:              767px;
max-width:          767px;
text-align:         center;
}

/* Select one of the margin statements below */
.navbar.notresp navbar-inner {
margin:             20px 6px 6px 20px;      /* Move down 20px, right 20px */
}

.navbar .nav > li > a, .dropdown-menu > li > a, .dropdown-submenu > li > a {
text-shadow:        none;                   /* Remove text shadow */
}
.navbar .nav > li > a:first-letter {
font-size:          18px;                   /* Change [17]px first letter */
/* If default is 1em/100%, try adjusting using 1.2em/120% or 0.8em/80% for example */
}

/* OPTION 1/1 - HIDE NAVBAR BOX */
.navbar-wrapper .navbar.notresp .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow:    none;
box-shadow:         none;
background:         none;
-webkit-box-shadow: none;
-moz-box-shadow:    none;
box-shadow:         none;
}

/*change height of navbar*/
.navbar-wrapper .brand {width:100%; float:center;}
.navbar-wrapper .navbar {width:99%; float:center}
.navbar-inner { height: 250 px}

.navbar .navbar-inner
margin:     0;

What can I add to make it look more like the image above?

I haven’t tested your CSS, but I started with the code in the snippet to centre the header block.

Not all of it is needed in your case (for example, you don’t centre the logo). You end up with something like this:

CSS—to go in your child theme’s style.css:

/* Position logo */
.brand.span3 {
	float: none;
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 250;
}

/* Hide tagline */
.tc-header .outside,
.site-description,
.inside.site-description {
	display: none;
}

/* Hide social icons */
.social-block.span5 {
	display: none;
}

/* Center menu */
.navbar-wrapper .navbar.notresp {
	float: none;
	width: 90%;
	margin: 0 auto;
}

/* Variable number of floating elements */
.navbar-wrapper .navbar.notresp .nav {
	float: none;
	width: 100%;
	text-align: right;
}

.navbar-wrapper .navbar.notresp .nav > li {
	float: none;
	display: inline-block;
}

/* Fix 2nd level <li>s */
.navbar-wrapper .navbar.notresp .nav > li .dropdown-menu li {
	float: left;
	width: 100%;
	text-align: left;
}

/* Adjust margin/padding */
.navbar-wrapper .navbar.notresp .navbar-inner {
	margin: 0px 0px;
	padding: 0px 0px;
}

/* Hide navbar box */
.navbar-wrapper .navbar.notresp .navbar-inner {
	-webkit-box-shadow:	none;
	-moz-box-shadow: 	none;
	box-shadow: 		none;
	background: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

@media (max-width: 979px) {
	.tc-header .brand {
		width: auto;
		position:relative;
	}
	.row-fluid .offset1:first-child {
		margin-left: 0;
	}
}
.navbar-wrapper.clearfix.span9 {
    background-color: orange;
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: 0;
    width: 100%
}

You can see that I’ve made changes to that snippet, which:
– allow you to do all this with just CSS;
– give the “ribbon” some space above and below, and make sure it stretches over to the left;
– give the logo absolute positioning, which will take it out of the normal flow and allow it to sit on top of the “ribbon”. Because it has absolute positioning, the top declaration may make it look a bot odd with the WordPress admin bar when you are logged on, but you will see it better when you are logged off.
– take off the bottom border on the header;
– put the logo back to relative positioning on smaller screen sizes. You need to decide what you want to do in the case of smaller screens (and you will need to make some changes in the media queries—it’s a bit messy now).

I didn’t go through the whole of the rules that came from the snippet. Some may be redundant in your case.

A lot of this depends on your logo and it’s still not perfect; it will need some more tweaking (not least to get rid of the horrible orange colour that CSS defaults to).

Thank you so much for your help. I’ve been trying to play around with the coding. I just have a couple questions:

– how do I get rid of the orange bar when the screen is smaller, like for a cell phone?
– the menu links are positioned on the left side of the page. How do I make them more central and evenly spaced?
– the menu links in the navbar sit higher in the bar. How do I centre them?

Again, thank you so much for your help!

This is how it looks now:
https://snag.gy/iwoJ8.jpg

And this is how it looks when the screen is smaller:
https://snag.gy/lc7bZ.jpg

How can I fix this? And make sure that the orange isn’t there when the screen is smaller?

Watch this video (6 minutes) on Firebug, which will show you how to find these yourself (which is much quicker): https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

You need the following:

@media (max-width: 979px) {
    .navbar-wrapper.clearfix.span9 {
        background-color: transparent;
    }
}

in your CSS. That is a media query which tells the browser what to do below 979px width (which is one of the responsive break-points of the theme).

This article on media queries will be useful too: https://www.themesandco.com/snippet/media-queries-responsiveness/