Hello,

Thanks alot this is perfect!

Just incase anybody else is trying to do the same thing here is the final code that worked for me. (Add it to your Custom CSS or if you have Jetpack in the Edit CSS section under appearance).

@media only screen and (min-width: 768px) {



/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/

#header_main .container, .main_menu ul:first-child > li a {

height: 58px !important;

line-height: 58px !important;

}



/*header with social icons: */

.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {

height: 58px !important;

line-height: 58px !important;

}



/*header with social icons and bottom nav */

.bottom_nav_header.social_header #header_main .container {

height: 58px !important;

line-height: 58px !important;

}



.fixed_header #main {

padding-top: 58px;

}



.fixed_header.social_header #main {

padding-top: 90px;

}



}

I think it might be the menu items that need shortening because they stay at 116px in height when the rest moves upward.

Hello thanks for the reply.

The reason it looks fine at the moment is because I took the changes down due to the fact it wasn’t looking good.

I understand the menu won’t change but what I am looking for is a header that doesn’t change size. So it always stays at 58px in height even when you scroll.

Devins code seemed to be along the right lines but the header gets smaller when scrolling and there although it shortens the header there is a dark space still present so in actually the header is still the same size.

Hard to explain without being visual but if you compare the screenshots above with the site how it is now you will get a clearer picture.

Thanks for all the help :)

Hello,

sorry forgot the link it’s http://rerral.com

I have reload the page a few times and it still doesn’t work. I have also taken a look through the CSS files and can’t see an error. Also as far as I can tell all no custom CSS is related to the menus.

There is a lot of CSS files so i’m still searching for the selector to change it manually but haven’t seen it yet.

Thanks for the help :)

Hello Devin,

Thanks for the reply. I suppose this is understandable. Thanks for the message anyway, I think I may have solved the problem.

Alright, I have been trying a new approach and I’ve gotten I little stuck. wondering if you have any advice.

Here is what I have done so far:

1) I registered a new sidebar using the following code at the bottom of functions.php:

if ( function_exists('register_sidebar') ) {

register_sidebar(array(

'name' => 'Roster Sidebar',

'id' => 'roster-sidebar',

'description' => 'Appears as the sidebar on the custom roster',

'before_widget' => '<div style="height: 280px"></div><li id="%1$s" class="widget %2$s">',

'after_widget' => '</li>',

'before_title' => '<h2 class="widgettitle">',

'after_title' => '</h2>',

));

}

2) I then added widgets to the new sidebar.

3) Next I created a file called file called archive-djs.php and copy the code from archive.php only replacing

//get the sidebar

$avia_config['currently_viewing'] = 'blog';

get_sidebar();



?>

With:

<?php



//get the sidebar



get_sidebar( 'roster' );



?>

4) Then I created a file called sidebar-roster.php and added:

<div id="sidebar">



<ul>

<?php

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('roster-sidebar') ) :

endif; ?>

</ul>

</div>

Now I have reloaded http://gummet.com/djs and there is no a sidebar space but no sidebar???

I know the problem is also fix there is just one magic bit of code missing. I can feel it in my bones.

Url is http://gummet.com