Jump to content

- - - - -

Custom Fixed Nav for Responsive Site

Nav Responsive Fixed Navigation

  • Please log in to reply
1 reply to this topic

#1 balfred1345†


    Super Member

  • DMS Subscriber†
  • 118 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 17 January 2014 - 09:02 PM



Could you please take a look at my dev site: http://whub34.webhos...idev2.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,



#2 James B†

James B


  • DMS Subscriber†
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 January 2014 - 11:32 AM

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;

Also tagged with one or more of these keywords: Nav, Responsive, Fixed Navigation