Navbar at bottom with header at fixed height

4 posts in this topic



I have a header with fixed height of 300px.

I want the navbar at bottom inside the header, but it always moves to top.


I tried several CSS but it always gets overwritten.


Any ideas?



Share this post

Link to post
Share on other sites

Hi there, can we have a link to the live page so we can see the setup and take a look at what css you could use.

Share this post

Link to post
Share on other sites


Problem is that the site is live and I was trying to update header in the preview.



The things I did was, all is in full with:

  1. Set at header background image. To have it nicely displayed I had to have the header have a fix min height of 300pix
  2. I added a simple navbar which is at top
  3. I added main Navbar, this shows now below the simple navbar.

I want it to move to bottom of header, not below simple navbar.


I can add classes to navbar like .header-navbar.


The main goal is to have the header look something like:


thx for trying to help me.

Share this post

Link to post
Share on other sites



If you want to have a similar header area as the site you linked, all you need to do is add an image to the header area settings, then drag and drop the NavBar section beneath that. You will need to customize the style of the NavBar to have a similar to that sites navigation.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • navbar in mobile view
      By micstepl+
      make NavBars (each) choose-able, to break in mobile view "above content" OR "below content"
    • DMS 2 Navbar menu repeats in hamburger mode
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

    • Scroll Nav in Safari not properly sticking to NavBar
      By janpeeters+
      I'm using the Scroll Nav extension on It works mostly great but in Safari 9.0.1 it jumps too high when it sticks. Firefox and Chrome latest versions work just fine in the current setup.
      So I'm wondering if the developer of the plugin is around to give me a clue as to how to fix this? I've thought of using the CSS Classes of the Pagelines Pro plugin but couldn't find a way to get it working.
      Thanks for any suggestions.


    • Change NavBar Menu alignment and font size
      By saur0+
      Hi, I have managed to change the size of the navbar logo to 75px, but I now want to change the size of the font on the menu (20px) and align the menu vertically to the bottom (so it is in line with the bottom of the logo image). I've been playing around with the CSS but can't seem to get it right, if anyone could give me some pointers it would be much appreciated. 
      The site is if you want to take a look at the source. 

    • Remove or reduce margin (or padding) in header
      By richardjacruz+
      I'm building a site at:
      and I followed the instructions on building a "branding" area in the header:
      But, if you see the image I've attached, you'll see that there's a lot of space between the nav and the slider. Is this something I need to control with CSS in the Custom code section, or is there something else I can do that's part of the header section?

      Actually, what would also be nice is if I could put a divider line there... like an orange or a light gray.