Header and WP Admin-Bar Behaviour

[Alberto Brusa]

Dear Bill,

I’ve come across two issues with the header behaviour and size that I think needs some modifications on Elite.

When a user is logged in (which is my intension) WP shows the admin-bar on top of the page. This bar is sticky if the screen is wide, but gets scrolling if the screen is smaller. The admin-bar is 32px high when on wide screens but 46px high on narrow ones.

Elite’s default header behaviour is sticky, with the header being placed below the admin bar “when necessary” by assigning the proper CSS.
For small screens I believe the theme should (1) locate the header in relation to the bigger admin-bar, and (2) make the header scroll so that it matches the WP admin-bar behaviour (otherwise we end up with a header miss located and content visible above it).

I hope the description of the issue is clear. Please let me know if not.

As always, thanks for your time and consideration.

Best regards,

[Bill Robbins]

Alberto,

Yes WordPress does apply different CSS to the admin depending on the screen size. You’re welcome to alter the position of the header elements with some media queries if you’d like to. If you don’t mind giving up the fixed logo/menu you can change the header’s position so it’s relative. It’ll be positioned below the admin bar and scroll away as the user moves down the screen. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 600px) {
   
   	.admin-bar #header {
   		position: relative;
   		top: 0;
   		background-color: #000;
   	}
   
   }
   

3. Update your settings.

You’ll want to change the background color to fit your needs.

Take care,
Bill

[Alberto Brusa]

Thanks Bill. We’ll need a little bit more to be there!!
WP does some additional changes as the size goes down (see attached images).
At some point the logo gets the admin-bar on top, and then it goes out of the navigation menu.
I believe the code fixed the issue with the scrolling.

Best,

AB

Attachments:

1. 

   Screen-Shot-2014-09-16-at-18.35.18.png
   

2. 

   Screen-Shot-2014-09-16-at-18.36.19.png
   

3. 

   Screen-Shot-2014-09-16-at-18.36.57.png
   

[Bill Robbins]

Alberto,

Please don’t take this the wrong way. The theme is not intended to use the admin bar with anyone other a site admin. You can likely alter it’s functionality to fit your needs, but that falls outside of the scope of support though.

Thanks,
Bill

[Alberto Brusa]

I completely understand your point.
I just thought you might have already implemented a “solution” for this WP behaviour in any of your themes.

No harm to ask?

Best,

AB

[Bill Robbins]

It never hurts to ask 🙂

I not very fond of the admin bar so I tend to make as few accommodations for it as possible. Sorry there isn’t an off the shelf option for you there.

Take care,
Bill

[Alberto Brusa]

Thanks for everything Bill!
I finally managed to make it look acceptable with the following code + a plugin to style the WP admin-bar.

If you are curious:
albertobrusa.com

Best,

AB

/* Navigation background color transparency and border*/

#header.scroll-background, body.standard #header, body.blog #header, body.archive #header, body.error404 #header, body.search #header {
	background-color: rgba(255,255,255,0.1);
	-webkit-box-shadow: 0 2px 6px -6px black;
	   -moz-box-shadow: 0 2px 6px -6px black;
	        box-shadow: 0 2px 6px -6px black;
}

/* Slick Navigation Button */

.slicknav_btn {
    background: none;
}
.slicknav_menu .slicknav_icon-bar {
    width: 28px; 
    height: 4px;
}

@media only screen and (max-width: 600px) {

	.admin-bar #header {
		position: absolute;
		top: 46px;
	}

#header.scroll-background, body.standard #header, body.blog #header, body.archive #header, body.error404 #header, body.search #header {
	        box-shadow: none;
}

}

@media only screen and (min-width: 601px) and (max-width: 780px) {

	.admin-bar #header {
		position: fixed;
		top: 46px;
	}

}

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

	.admin-bar #header {
		top: 32px;
	}

}

[Bill Robbins]

Glad to hear you found a solution that worked out for you. Have a great day Alberto.

[Author]

Posts