Moving the menus buttons of the Forever Theme to the top

simonandleanne2015 · Member · Feb 15, 2015 at 5:43 pm
Copy link

Add topic to favorites
Hello everyone!

I have WordPress Premium and would like to move the menu buttons of the Forever theme to the top of the page. Can’t find a place where I can edit the css to do this – can anyone help? Also need help with the actual CSS!

Thanks!

The blog I need help with is simonandleanne2015.com.

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Feb 15, 2015 at 5:54 pm
Copy link
You can do that with absolute positioning:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Here is an example you can try out by adding it to your Appearance > Customize > CSS editor:
```
#masthead {
	position: relative;
}

#access {
	position: absolute;
	top: 0;
}

.custom-header {
	padding-top: 50px;
}
```
simonandleanne2015 · Member · Feb 15, 2015 at 5:58 pm
Copy link
Thanks very much!!

I’ve just put your code in and it’s bumped the menu to the top which is perfect!

But do you know how to make the background of the menu buttons white – as when you scroll, the buttons become unreadable

Thanks again
designsimply · Member · Feb 15, 2015 at 6:05 pm
Copy link
I see you’ve added some additional custom CSS to make the menu a fixed position:
```
body #access {
	position: fixed;
	background-color:#FFF;
	top:0;
	left:0;
	width:100% }
```
That actually overrides this from earlier, so you can delete it now if you want:
```
#access {
	position: absolute;
	top: 0;
}
```
I also see that you’ve made that entire “body #access” container background white, and the menu items are readable to me when scrolling. Do you still need help?
simonandleanne2015 · Member · Feb 15, 2015 at 6:14 pm
Copy link
Thanks again!

I’ve put it in and matched the colour to the blue which is great!

Loving the fact that the buttons are static at the top now – but is there a way to bump the white box down the page so that the button bar doesn’t overlap it?

Sorry for overloading you with questions!
simonandleanne2015 · Member · Feb 15, 2015 at 6:30 pm
Copy link
Sorry ! One more thing – is it possible to display the header image, only on the home page?

Thanks!
designsimply · Member · Feb 15, 2015 at 6:36 pm
Copy link
Try adding some padding to the top of the body element:
```
body {
	padding-top: 50px;
}
```
There’s still another problem because fixed positioning is a little funny to work with. If you log out and check the site, there’s a gap above the menu where the gray admin bar usually appears when you are logged in. To get rid of it, you can try adding “margin: 0;” to the “body #access” rule and then if you want to also correct the margin for the logged in view, you could add something like this too:
```
.logged-in #access {
	margin-top: 32px;
}
```
It’s possible there’s a better way to do it… I actually haven’t worked with fixed positioning all too much.
simonandleanne2015 · Member · Feb 15, 2015 at 6:45 pm
Copy link
Ahh – yes. Good point, thanks!! I’ll have a play with those

Do you know if there’s a way to only display the header image on the home page?

(So when you click on the ‘map’ button for example, the header image disappears)
designsimply · Member · Feb 15, 2015 at 7:17 pm
Copy link
You have some tricky questions! Yes, there’s a way to show the header image on the home page only—there is a trick to it. What you can do is hide the header for all pages, and then unhide it for the home page. Here’s how:
```
.custom-header {
	display: none;
}

.home .custom-header {
	display: block;
}
```
An alternate would be to use a static front page and just put that image inline (as I see you’ve already tried). In that case, you could just get rid of the header image all together from the Appearance > Header page.
simonandleanne2015 · Member · Feb 15, 2015 at 7:57 pm
Copy link
Superb!!

Thanks so much. If you have a sec, i have one final question… Is it possible to make the images on each page align with the header image that shows with the front page. For example the map image on the ‘map’ page shows lower down the page than the home page main image (presumably because there used to be a header above?)

Many thanks!!
designsimply · Member · Feb 17, 2015 at 8:30 pm
Copy link
Is it possible to make the images on each page align with the header image that shows with the front page

So comparing the spacing at the top of these:
http://simonandleanne2015.com/
http://simonandleanne2015.com/map/

I think you could add a little padding on just the home page to solve the issue:
```
.home .custom-header {
	padding-top: 36px;
}
```

No items found.