Keeping navigation bar afloat in posts….

joeybeats · Member · Aug 24, 2013 at 3:14 pm
Copy link

Add topic to favorites
Is there anyway to keep the navigation bar atop posts?

For example, I have a secondary navigation bar underneath my header. It would be awesome if I could keep the navigation bar on every page and page.

Is that possible?

Thanks in advance.

The blog I need help with is: (visible only to logged in users)
justpi · Member · Aug 25, 2013 at 7:25 am
Copy link
The secondary menu on Mixfolio shows on the main posts page only. You need to edit your menu and set it as your primary one.
joeybeats · Member · Aug 25, 2013 at 2:46 pm
Copy link
Justpi,

thanks for the reply. Unfortunately, I’d like to keep the navigation bar below the header and also have it appear in posts and pages.

Does anyone know how to achieve this?
justpi · Member · Aug 25, 2013 at 7:07 pm
Copy link
You’re welcome. Perhaps my reply wasn’t clear enough: the secondary menu cannot show on other pages – no CSS can change this. So, first you need to set your menu as your primary menu, and replace this:
```
#branding-inner {
    display: none;
}
```
with this:
```
#site-title, #site-description {
    display: none;
}
```
Then we can see how to position the primary menu below the header image.
joeybeats · Member · Aug 26, 2013 at 1:56 am
Copy link
Justpi,

forgive the confusion on my end. I did as you’ve instructed. The navigation bar now sits above my header along with search menu.

How do you suggest I proceed from here?

Thanks a bundle…
panaghiotisadam · Member · Aug 26, 2013 at 4:56 pm
Copy link
Now it’s my turn to say “unfortunately”! All the solutions I could think of require setting some fixed height, but this is incompatible with the responsive layout of the theme: if I reposition the image it won’t shrink as the theme shrinks, and if I reposition the menu it will look misplaced in narrow devices.
So I would suggest an alternative: since your header image is just your name, you could perhaps revert to using the actual blog title instead of an image. Remove the image (in Appearance > Header), turn this:
```
#site-title, #site-description {
    display: none;
}
```
to just:
```
#site-description {
    display: none;
}
```
and add this to make the title huge and centered:
```
#branding h1 a {
    float: none;
    font-size: 300%;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-left: 0;
    text-align: center;
}
```
joeybeats · Member · Aug 26, 2013 at 6:35 pm
Copy link
Fantastic!

One more modification.

How do I color the top so it’s black?
joeybeats · Member · Aug 26, 2013 at 7:05 pm
Copy link
….

Additionally, is there any way to remove the search option from the navigation bar?
thesacredpath · Member · Aug 26, 2013 at 7:57 pm
Copy link
By top, I assume you mean the grey of the header area. The first bit of code makes that black, and the second bit makes the search in the header area go bye-bye.
```
#branding-inner, #branding .fill {
background-color: #000000;
}

#branding #searchform input#s {
display: none;
}
```
joeybeats · Member · Aug 29, 2013 at 4:29 pm
Copy link
BINGO!

Thanks boss!
thesacredpath · Member · Aug 29, 2013 at 6:33 pm
Copy link
@joeybeats, you are welcome.

No items found.