Ask your WordPress questions! Pay money and get answers fast! (more info)

Admin Bar Interference With My Fixed Nav WordPress

  • SOLVED

Here's my dilemma,

I want to keep the wordpress admin bar because I want my users to have easy access to posting stories and I'm putting custom links in the admin bar as well for them as well, but I also have a fixed nav which looks great when users aren't logged in but when they're logged in...

It looks like this: http://screencast.com/t/6jML7HIhg1

Is there anything I can add to my CSS and/or header file to keep this from happening. I like where the nav is currently and don't want to move it to the top above my logo.

My website is http://bit.ly/1prvicW so that you can see how the header looks when a user isn't logged in to compare.

Thanks for your help.

Answers (4)

2014-09-06

zebra webdesigns answers:

Hello Brennen

when the admin bar is shown in the front end, the body tag will accompany with class called logged in.
you can use that class to control the layout.

eg:

body.admin-bar /*additional class goes here */ {

}

that can control the layout of the site.

can you create a subscriber login for me and PM me the detail.
so that I can give the exact class.
or can you give me the exact theme name and link for the theme.


Brennen Jones comments:

Sent!


Brennen Jones comments:

This works like a charm! I had a custom theme made where the nav bar wasn't in its traditional place and what you told me about adding a special class to the body did the trick.

I appreciate it.

2014-09-06

Cesar Contreras answers:

Add the next <em>CSS</em> code

#wpadminbar{top: 160px !important;}

<em>good luck</em>

2014-09-06

Romel Apuya answers:

i think this..

#wpadminbar{top: 95px !important;}

2014-09-06

Bob answers:

If after loggin in your body class contain "logged-in" then following might work.

.logged-in #header-nav{
top:142px;
}


above code should be added at after this code

#header-nav {
z-index: 999999;
top: 110px;
width: 100%;
background:#1d1d1d;
}

at line no. 3043

If body tag do not contain class "logged-in" then add following code in your theme's functions.php file

add_action('wp_head','bob_hook_css');

function bob_hook_css()
{
if( is_user_logged_in() ){
$output="<style> #header-nav{ top:142px !important;} </style>";
echo $output;
}// if over

}//function over


Brennen Jones comments:

The first one would have did the trick...

I didn't have any special classes in my body for it to work at first and Zebra Web helped me put those classes there.


Bob comments:

Happy to hear that you get the solution.