• 0

Custom Fixed Nav for Responsive Site


Posted · Report post



Could you please take a look at my dev site: http://whub34.webhostinghub.com/~videoh6/cidev2.com/home/


I've been trying to make my own custom fixed nav by placing the following inside a full-width section: 2 columns for media box, and nav bar, and an additional column for a second nav bar.


Here are my problems:

1)I seem to have accidentally deleted the header section, so now my custom nav is in a full-width section and is partially obstructed by the WP admin nav bar.  How do I get the header back, or otherwise fix this annoying problem?

I can't just give margin to the top, since this means that the lower sections will be seen in this space as the user scrolls up.


2) Under my custom nav I have a Hero Unit. How do I get this to work so that it stays below the custom nav in a responsive way? I can't just give lots of padding to the bottom of my custom nav, as this gives too much empty vertical space for large screens etc. I attempted to a LESS solution, but I didn't do it correctly as it is not working.


Here's the LESS I  attempted:

#site {
  padding-top:(@resLargeDesktop 100px);
  padding-top:(@resDesktop 200px);
  padding-top:(@resPortraitTablet 300px);
  padding-top:(@resPhoneLandscape 400px);
Thanks very much,



Share this post

Link to post
Share on other sites

1 answer to this question

  • 0

Posted · Report post

Hi there,


You won't have deleted the header section, that should be present on all pages. If you click on the editor so the page grid comes up, try removing the second nav to see if the header panel (which can be very thing) is hidden under the top nav. If it is, put back your nav then use css on the #header to give it a margin-top of --px so it moves down the screen so you can edit/drop.


It shouldn't matter if the elements below appear in that position as the screen scrolls, as they will still go under the navbar at the same point as they would in the standard setup etc, the content scrolls under the fixed nav.


When the fixed navbar is in place there is a div called fixed top before the nav which stops the content below going under. Adjust the figure here to keep the content below.


.pl-fixed-top {
height: --px;

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