Header Nav Bar Adjustment

Support Area Forums Foundation Header Nav Bar Adjustment

This topic contains 11 replies, has 2 voices, and was last updated by  Dare Adelugba 1 year, 1 month ago.

Viewing 12 posts - 1 through 12 (of 12 total)
URL to the page in question: http://
  • Author
    Posts
  • #37609

    Dare Adelugba
    Participant

    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

    • This topic was modified 1 year, 1 month ago by  Dare Adelugba. Reason: clarity
    #37612

    Dare Adelugba
    Participant

    Bill,

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

    Thanks,

    Dare

    #37624

    Bill Robbins
    Moderator

    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

    #37632

    Dare Adelugba
    Participant

    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

    #37633

    Bill Robbins
    Moderator

    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.

    #37639

    Dare Adelugba
    Participant

    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

    #37640

    Bill Robbins
    Moderator

    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.

    #37641

    Dare Adelugba
    Participant

    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.

    #37642

    Bill Robbins
    Moderator

    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.

    #37643

    Dare Adelugba
    Participant

    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 🙂

    #37644

    Bill Robbins
    Moderator

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

    #37654

    Dare Adelugba
    Participant

    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

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Header Nav Bar Adjustment’ is closed to new replies.