Jump to content


Photo
voyant

Make Header / Navbar Visible at all Times

header navbar menu visibility

Best Answer tmeister , 18 July 2014 - 03:41 PM

Hi there,

 

I'll used the :before pseudo class in the mobile menu holder to get something like the image below, please add the follow CSS code ( http://paste.pagelines.com/UureJtWw ) in your theme or in the Custom LESS/CSS Box.

 

00000196.png

 

Best,

Enrique.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 164 posts

Posted 16 July 2014 - 06:24 PM

Currently the header/navbar is hidden until you scroll down the page.

 

I'd like it to be visible no matter where a visitor is on a page.

 

I've been screwing around with this this morning but haven't found a way to do this that I am satisfied with.

 

I can remove the negative margin for .hide-menu and push the .section-page-title .holder down using custom CSS, but that seems to have some consequences on smaller screens (header/navbar disappears).

 

Could you please advise me on the best way to do this?

 

Cheers,

 

Dawson



#2 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 164 posts

Posted 16 July 2014 - 06:42 PM

(header/navbar disappears).

 

Okay, it looks like I was mistaken about this. The header/navbar turns into the mobile menu, so it doesn't disappear (it was hard to see, but I tested on the Voyant demo page and got the same result).

 

So I guess my question becomes: how can I maintain the visibility of the logo on smaller screens?



#3 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 164 posts

Posted 16 July 2014 - 06:51 PM

So I guess my question becomes: how can I maintain the visibility of the logo on smaller screens?

 

I see that I can add a background colour and a background-image (scaled down and float to the left) to the row that contains the mobile nav, but would like to know if this would be the recommended solution.



#4 tmeister

tmeister

    Super Member

  • Members

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

Posted 18 July 2014 - 03:41 PM   Best Answer

Hi there,

 

I'll used the :before pseudo class in the mobile menu holder to get something like the image below, please add the follow CSS code ( http://paste.pagelines.com/UureJtWw ) in your theme or in the Custom LESS/CSS Box.

 

00000196.png

 

Best,

Enrique.



#5 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 164 posts

Posted 21 July 2014 - 08:49 PM

Thanks very much, Enrique.

 

Cheers,

 

Dawson







Also tagged with one or more of these keywords: voyant, header, navbar, menu, visibility