Header Nav Bar Adjustment

[Dare Adelugba]

Hello Bill,

I making some changes to the header: 1) to place the nav bar on top which I did as shown below; 2) to target the header so it will have a full width as the body and to style with a different background color. So far, I have tried without success to put logo div inside header div. In fact, it appears that the header background will not extend over the logo. I also tried to apply z-index which I may be doing wrong. My last option is to contact you for help.

In short, I would like both the nav bar and logo/tagline divs to be wrapped in a new div that extend over the body so I can style the background. Sorry I don’t have the site to post yet since most of these are still being done locally.

Here is my modified header code:

<div id="header" class="clear fix">

<div id="navigation" class="shadow clearfix">
		
			<div id="nav-left">
			
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
				
				<?php wp_nav_menu( array( 
					'theme_location'	=> 'primary',
					'container'			=> 'div',
					'container_id'   	=> 'mobile-menu',
					'menu_id'			=> 'mobile-menu-select',
					'fallback_cb'		=> false
					) ); ?>
				
				
			</div>
			
			<div id="nav-right">
				
				<?php if(of_get_option('search') == 'yes') { ?>
					
					<?php get_search_form(); ?>
				
				<?php } else { ?>
					
					<?php wp_nav_menu( array( 
						'theme_location'	=> 'secondary',
						'fallback_cb'		=> false
						) ); ?>
					
				<?php } ?>
				
			</div>
			
		</div><!-- #navigation -->

		
		<?php if(of_get_option('header_blog_title') == 'image') { ?>
		
			<div id="logo">
			<?php if (is_front_page()) {
					echo '<h1><a href="'.home_url().'/"><img src="'.of_get_option('logo','').'" alt="'.get_bloginfo('name').'" /></a></h1>';
				} else {
					echo '<a href="'.home_url().'/"><img src="'.of_get_option('logo','').'" alt="'.get_bloginfo('name').'" /></a>
';
				} ?>
			</div>
			
		<?php } elseif(of_get_option('header_blog_title') == 'text') { ?>
		
		
			<div id="text-logo">
			<?php if (is_front_page()) {
					echo '<h1><a href="'.home_url().'/">'.get_bloginfo('name').'</a></h1>';
				} else {
					echo '<a href="'.home_url().'/">'.get_bloginfo('name').'</a>
';
				} ?>
			</div>
			
		<?php } ?>
		
		<?php if(of_get_option('tagline_include') == 'yes') { 
			
		if (is_front_page()) {
				echo '<div id="tagline" class="special"><h2>'.get_bloginfo('description').'</h2></div>';
			} else {
				echo '<div id="tagline" class="special">'.get_bloginfo('description').'
</div>';
			}
		
		} ?>
		
		
	</div><!-- #header -->

Thanks,
Dare

[Dare Adelugba]

Bill,

This is a follow-up. The adjustment is for large screen only. iPad and smaller screens are fine as is.

Thanks,

Dare

[Bill Robbins]

Good Morning Dare,

We should be able to make that happen. Are you wanting the header area to go from edge to edge in the browser window? Do you want the entire header area to do that or just the navigation bar? Let me know and we’ll go from there.

Thanks,
Bill

[Dare Adelugba]

Thanks Bill. I want the entire header with nav bars to go from edge to edge. But I will auto-center the nav bar. When I tried it it stretched the #wrap div throughout all pages so I will appreciate your help.

Dare

[Bill Robbins]

It’s not something that I’ve seen someone do I don’t believe, but it should be possible. In the header.php file you’ll need to take out this line:

<div id="wrap" class="clearfix">

and then place it at the bottom of the file. That’s the div that sets the width of the container that the site is held in and keeps objects from going beyond it. With the content portion of the header moved above it you should be able to have it span the full width of the screen.

If you want the navigation bar to span the full width, you’ll need to wrap it in an additional div so that you can still limit the width of the navigation menu portion and center it. The same goes for the logo and tagline too.

Hopefully that will get you pointed in the right direction. Let me know if you run into trouble.

[Dare Adelugba]

It works. I got the header the way I wanted except for styling the background.

My new wrap is <div = "new-header" class="clearfix"> </div>

Then my css is

#new-header {
   background: #fff;
}

but doesn’t work. I tried using ‘background-color:’ too. I tried the code in both the child theme editor and in the custom css did not worked. However, the styling works when I applied under the inspect element tool.

Sorry Bill for giving you the trouble.

Dare

[Bill Robbins]

Glad that parts of it work for you. For the code that opens the div, make sure it says id=”new-header” like this:

<div id="new-header" class="clearfix">

That way the ID is specified so you can target it specifically with the CSS like you have. See if that doesn’t help out.

[Dare Adelugba]

Styling still not work. I will add to a list of my requests once the site islive in a couple of weeks or sooner.

Thanks Bill.

[Bill Robbins]

You could always add the style inline for the time being:

<div id="new-header" class="clearfix" style="background-color: #fff;">

If that doesn’t it, then I would check to see if the new div is collapsing in. The clearfix should normally clear any floats and keep that from happening, but something could be off there. Often when you discover a background color won’t appear when you know it should, that is the culprit.

[Dare Adelugba]

It works. Now I know t’s the body color that prevents it from showing. But I’ll use the inline styling for now.

Thanks and have a good evening. Sun is already going down on the east coast 🙂

[Bill Robbins]

Glad it’s at least working for now. Have a good evening and let me know if you run into other questions 🙂

[Dare Adelugba]

Hi Bill,

This is just an update that the header is okay now and I have removed the in-line styling. I had to assign a height to the new div and the styling was noticeable soon as I gave it a 300px height.

Thanks once again.
Dare

[Author]

Posts