Jump to content


Photo
voyant

Voyant Keep Fixed Navigation To stick on top then follow as you go down.

navigation stick

  • Please log in to reply
7 replies to this topic

#1 jagipson

jagipson

    Advanced Member

  • Members

  • 82 posts
  • Country: Country Flag

Posted 14 August 2014 - 02:19 PM

I working on a site at: http://www.webdesign...com/accounting/  I would like to have the fixed navigation to stick on the top instead of hide. When you scroll all the way to the top of the website or when you enter the site you don't see a nav until you scroll down. How can we used this fixed navigation to stick on the top and scroll as you go down? I seen another post about this but the link didn't work to see css. Please let me know how you could do this.

 

Thanks

 

 



#2 tmeister

tmeister

    Super Member

  • Members

  • 221 posts
  • LocationValle de Bravo, México
  • Country: Country Flag

Posted 14 August 2014 - 05:38 PM

Hi,

 

In the toolbar please  locate the Custom tab and in the CSS / LESS field add the follow:

 
#fixed-top.hide-menu{
	margin-top:0;
}

With that the menu will never hide again.

 

Bests,



#3 jagipson

jagipson

    Advanced Member

  • Members

  • 82 posts
  • Country: Country Flag

Posted 14 August 2014 - 08:18 PM

Take a look at this. http://www.webdesign...com/accounting/ Its stuck on the top like its suppose to but, its overlapping the other items.



#4 jagipson

jagipson

    Advanced Member

  • Members

  • 82 posts
  • Country: Country Flag

Posted 14 August 2014 - 09:42 PM

Could you also repost the css that you had on other post about displaying the logo on mobile? The link isn't working to show the css.

 

Thanks

 

 



#5 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 164 posts

Posted 17 August 2014 - 10:55 PM

It looks like PageLines Paste Bin is down/gone.

 

Anyway, I found a cached copy of the CSS Enriquez provided.

 
.section-menu-voyant .voyant-mobile-nav .voyant-menu-holder{
	width: 100%;
	margin-left: 0;
}

.section-menu-voyant .voyant-mobile-nav .voyant-menu-holder:before{
	background: url('http://3z6cyh36dph41r69gi2tjn07r24.wpengine.netdna-cdn.com/wp-content/uploads/2014/04/voyant4.png') no-repeat;
	background-size: contain;
	background-position-y: 5px;
	width: 100%;
	background-color: rgba(74,187,237, .8 );
	margin-left: 0;
	content: '';
	position: absolute;
	height: 60px;
}
.section-menu-voyant .mobile-trigger{
	right: 10px;
}

.section-menu-voyant .voyant-mobile-menu{
	margin-top: 10px;
}


#6 tmeister

tmeister

    Super Member

  • Members

  • 221 posts
  • LocationValle de Bravo, México
  • Country: Country Flag

Posted 18 August 2014 - 02:09 PM

Thank you dawsonbarber

 

And yes looks like paste.pagelines.com is down, but @jagipson that code should do the trick.

 

Bests,



#7 massmosaic

massmosaic

    Advanced Member

  • Members

  • 68 posts
  • Country: Country Flag

Posted 10 September 2014 - 05:14 PM

Hi, I've added the text above, which has made the menu fixed, but only on the homepage.

 

#fixed-top.hide-menu{
margin-top:0;
 
For example: http://acceleratorfilms.co has the menu fixed now at the top.... however http://acceleratorfilms.co/value/ does not.
 
Can you please help me get the menu to always show?


#8 massmosaic

massmosaic

    Advanced Member

  • Members

  • 68 posts
  • Country: Country Flag

Posted 16 September 2014 - 03:55 PM

Nevermind, it's working now.

 

Cheers







Also tagged with one or more of these keywords: voyant, navigation, stick