move menu down?

Hi,

I can’t promise that this will work on all devices, and I’m not sure what it will do to your main page where you have the video, but you can get your top menu to stick to the bottom of the page by adding the three last lines below to your navbar rule:

.navbar {
    background-color: #f7f5e7;
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 999;
}

Johnna

!! Great !!

Thanks

Geoff

Johnna

I meant to ask you – what code/where placed the navbar further up the page before I used your code?!

Geoff

oops! another problem.

The static front page has the menu at the bottom of the page which is fine but the other pages now have a menu at the bottom which has a vertical list of links!

How can I get all the pages to have the same menu format as the one on the front page?

Cheers

Geoff

Hi,

If it’s the top menu that you want showing at the bottom of all pages, then I think you just want to remove the custom menu widgets from your footer. Look in Appearance > Widgets > Main Widget Area.

If that’s not the answer to the question you were asking, let me know, I didn’t quite understand what you were asking in your second reply. I’m guessing that the answer is that the .navbar class minus the 3 last lines I added is what put the top menu where it was before. ??

Johnna

Johnna

I’m quite happy with the bottom nav bar being at the bottom on the front page but am trying to change the vertical list of links showing at the bottom of the other pages, e.g.

?!

Cheers

Geoff

Hi Geoff,

The vertical lists of links in the footer are widgets. Look in Appearance > Widgets > Main Widget Area, and remove the custom menus there.

Johnna

but will that get rid of the nav list?! I just want the links to arranged horizontally …

Cheers

Geoff

Assuming you want to keep the light-colored menu (formerly at the top now at the bottom), and get rid of the vertical menus in the brown footer section, removing the widgets will do that, and it will not delete your custom menu.

Ah! Will try later.

Thanks Johnna

Geoff

Johnna

‘just removed the widgets has done the trick!

Thanks!

Geoff

Sweet, I’m glad it worked!

Johnna

sorry to come back again! I have moved the nav bar into the header – I think!

front page

cannot seem to get the space for the video to be bigger – I need to make the footer smaller? cannot see how to change its height..

Cheers

Geoff

meant to add the css code being used

.site {
max-width: 100%;
width: 100%;
height: 100%;
}

.vidbg-container {
overflow: visible !important;
}

.site-header{
background: rgba(f, 0, 0, 0) url("https://geoff-ideas.co.uk/wp-content/uploads/2016/01/cropped-debussy-1-1.jpg") no-repeat scroll center top / 1600px auto !important;
position: relative;
max-width: 100%;
width: 100%;
max-height: 120px;
z-index: 9999;
}

.navbar {
background-color: #ffffff;
margin: 0 auto;
max-width: 1600px;
width: 100%;
position: fixed;
top: 20px;
z-index: 999;
}

.main-navigation li a {
color: red;
font-weight: bold;
}

Hm, the video was covering the main page when I first looked at the site, what changed to make it not do that? Did you switch the main page from being a page to posts, or vice versa? Did you adjust other css in the stylesheet? Just changing the footer height doesn’t fix it, unfortunately. It may be easier to get it back the way it was, and then tweak it from there to the way you want it.