Welcome! To use this support forum, please Login or Join Today!

   

Responsive Menu Positioning

{name}
RankRank

Total Posts: 37

Joined 2012-03-19

PM

 

Hi,

I’m using the lightfast theme but I’ve come up against a problem with the nav.

When I shrink the screen width on a desktop, the menu overlays the logo.

Then on mobile devices the responsive menu (three horizontal lines) sits on top of the logo and becomes un-clickable.

How can I position the menus better so that they respond properly when the screen shrinks or mobile devices are used?

The website is: londonpaawards.co.uk

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi, given the centered style of logo you might consider the following adjustments to your CSS:

Result: http://cl.ly/1Y3p0c1u1K06

/* mobile menu adjustment */

@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px) {
  #header {
    padding-top:0;
    padding-bottom:20px;
  }
  #header #logo a img {
    width:100%;
  }
  #shownav {
    top: 90px;
    left: 48.5%
  }
}

And for the menu reduction on small screens:

Result: http://cl.ly/1i0c2V1H1R16

/* small screen menu adjustment */

@media only screen 
  and (min-width: 767px) 
  and (max-width: 960px) {
  #menu li a {
    font-size:16px !important;
  }
}

Placing the above two snippets in your custom CSS or within your style.css file should do the trick.

 

{name}
RankRank

Total Posts: 37

Joined 2012-03-19

PM

 

Thanks Casey, you’re a legend!!

{name}
Rank

Total Posts: 1

Joined 2016-08-24

PM

 

Hi Casey,

I’m just setting up a new site and added a menu, however the menu seems to be almost off of the screen, how can I adjust this please?

Please see image attached.


Attachments:

https://www.filepicker.io/api/file/yHZpHIFBSuG7KdKVePyU

Update: I have now resolved this!