Fixed Menu Bar Desktop vs Mobile

  • 1
  • Question
  • Updated 3 years ago
  • (Edited)
Hi I managed to fixed the menu bar with the css code below in desktop browser, but the menu disappeared in the mobile version.

Apparently the button menu is very left of the screen.

Is there anything that can be done?

 #yola_nav_block { position:fixed; right: 0; background:#FFFFFF; border:0px solid #ffcc00; width:100%; height: 30px; z-index:100; top: 0px; }
#yola_nav_block nav { text-align: center; }
 #yola_nav_block nav ul { display:inline; }

I also added a horizontal fixed bar on the footer.
It is working in the desktop version, but the mobile version its only partially visible.
Is there anything that can be done?
Photo of Emannuel Roque

Emannuel Roque

  • 1 Post
  • 0 Reply Likes

Posted 3 years ago

  • 1
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Hi Emmanuel

We don't recommend custom CSS to alter the placement of elements of the template because there is no way to ensure that they will render correctly and consistently on mobile.  When I view your site on my mobile device the entire footer shows, but I need to swipe down in order to reveal the nav button.  

I don't have any suggestions for a good mobile result other than avoiding custom CSS.  Your site is looking really good, so I hope you can find a way to build it using the Style Designer in order to avoid unanticipated mobile issues.