Move Navbar Below Header

Hi Guys,

I am trying to move the navbar below the header slider and I have tried putting the following code below before the :

header.php (2.4 KB)

I am not sure what I am missing.

Thanks

any chance you have a live url?
D

@pdxSherpa, thanks for your response.

The live website is:
http://twihr.leanfrontiers.com

that’s cool i just looked at the php.
not an expert but wondering why you can’t use something like this? am using the underscore.me theme

<nav id="site-navigation" class="main-navigation" role="navigation">
   <button class="menu-toggle"><?php _e( 'Primary Menu', my_site' ); ?></button> //here you have your button and dynamically call your header.
   <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->

And maybe i am confused? your site looks fine. perhaps not sure what you are asking?
D

ok never mind. multitasking sorry.
As i understand you want the image slider to stay above the header.
regardless of size.
As i looked at the code in the live page i see that is not happening because the header is where it normally is, outside the wrapper.
What you would want to do. Or at least i’d try to do is to take your slider div/info and position it the header above your navigation and below the two circles logo.
I think that is all.
Unless you want to play w/relative and absolute positioning.
Which seems un-necessary.
D

Thanks for your help.

What I would like done, is have the menu and logo below the slider.

Hope that makes sense now.

well same thing really…go into your home page php (don’t know if you are using the index page or a custom made .php)
and copy and paste the<div class="navigation">section below your slider.
I just tested it on one of my pages.
I copied the mastehead section

<header id="masthead" class="site-header" role="banner">
	
			<?php if ( get_header_image() ) : ?>
				<div class="hdr-img">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
		</a>
			</div> <!--  end hdr-img  -->
		<?php endif; // End header image check. ?>
		
			<div class="site-branding">
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</div>
			
			
			<div class="search"><?php get_search_form(); ?></div><!-- .search -->
			<nav id="site-navigation" class="main-navigation" role="navigation">
				<button class="menu-toggle"><?php _e( 'Primary Menu', 'my_site' ); ?></button>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #site-navigation -->
	</header><!-- #masthead -->

And went to my home.php and pasted that below the end of the loop after </main>
it pasted a second copy of the navigation and header image there…
but i guess what i would do instead is copy the slider info in header.php above the navigation menu. Same effect but it would make more sense.
D

you could even put the slider in a diff php and call it in the header placing it above your logo & nav w/a get_template tag.

My theme doesn’t have a home.php file but does have the index.pho file.

I tried to paste the above code into my header.php after the and it didn’t work.

Is it possible to get the revolution slider above the menu bar?

Yes i believe so. just grab the div that contains your slider data and code and place it above the navigation & logo section in your header.php
first try to just copy and paste it, so worst case scenario you can just delete it.
make copies of everything of course beforehand.
D

@pdxSherpa, thanks for your help again.

When I look at the div id=“wrapper” that what comes after the navigation in the header.php and I have tried to put it on before the logo and navbar. But nothing is changing, unless I have the wrong div id.

The slider is on a page which is using the revolution slider and the visual composer plugin.

try copying and pasting this entire div <div class="wpb_revslider_element wpb_content_element">
and all elements w/in it above the <div class="navigation">
what haps if you do that?
D

header.php (5.4 KB)

I added the above and the only change I got was that there a white space after the slider.

What am I missing to get this to work. I tried it, it works well with Twenty themes not just with this theme.

well not sure at this point. what do you mean a whitespace after the slider?
do you see the slider at all? is the white space below the slider and above the header? That could possibly just get corrected w/css.
can you add a screenshot?
D

The navbar still isn’t moving below the slider that’s what I meant to say. And yes, I know the white space can be corrected with CSS.

Sorry at this point a bit at a loss as that should have worked.
D

Yes, you are right @pdxSherpa, because for the other themes it’s working. Thanks for your help.

Ok i don’t like this…but until a better solution comes up you could play w/relative & absolute positioning? Of course that would mean css adjusts for the media queries as well.

have not used either plug in or the theme you are playing now…so wonder if they plugins have setting you could use to position it.?
D