Business Identity Mobile Menu issues

• 

  drjeremykeating · Member · Dec 18, 2015 at 1:41 am

  • Copy link
  • Add topic to favorites

  Hello,

  I have done some CSS customizaton so that my main menu would be centred. However when I look at the mobile versions the main menu displays and overlaps and interferes with my pages and is basically unusable. When I get the mobile menu to be the toggle/drop down menu and look good, then my main menu for desktop view shifts way off-centre and becomes 2 lines of menu and looks bad.I currently have the desktop version looking like I want it but the mobile menu is terrible.

  Can someone please tell me how I can have both the desktop menu look centred, AND still have the mobile menu function correctly?
  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 18, 2015 at 1:59 am

  • Copy link

  Hi, the first rule you have in your custom CSS, .main-navigation, we need to wrap in a Media Query so that it doesn’t interfere with the mobile menu. Replace that rule with this.

  @media screen and (min-width: 800px) {
  .main-navigation {
  	width:90%
  }
  }

  In your body rule, you have a minimum width of 600px which keeps your site from adjusting on screens narrower than that. Remove that rule. As a rule, you never set a width of any sort on “body” as that is the browser viewport. Widths should only be set on elements that are within the body.

• 

  drjeremykeating · Member · Dec 18, 2015 at 2:08 am

  • Copy link

  Thank you very much! It worked!

• 

  thesacredpath · Member · Dec 18, 2015 at 2:10 am

  • Copy link

  Hooray and you are welcome.