The nav bar {or the menu button on mobile] is overflowing on to the text area.

• 

  growthjack · Member · Sep 30, 2016 at 9:03 am

  • Copy link
  • Add topic to favorites

  Hi happiness engineers! I need your help. http://www.growthjacking.com is the website. I am using twenty sixteen theme. Everything works awesome. I had some difficulty in getting the nav bar right there with the logo. It worked fine on Firefox and Chrome but edge was going crazy with the text. Somehow fixed it with some custom CSS. But now the mobile navigation [on clicking the menu button on mobile] vertically overflows over the content areas. I have just dabbled with a little CSS but can’t figure out what’s wrong. Please help. Thank you in advance.

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

• 

  innisfreehomestead · Member · Sep 30, 2016 at 10:48 pm

  • Copy link

  Hello Growthjack,

  Is something like this what you were looking for?

  @media screen and (min-width: 44.375em) {
  .main-navigation .primary-menu {
  	background-color: #FFF;
  	width: 100%;
  	margin: 0;
  	z-index: 999 !important;
  	position: relative;
  }
  }

  Let me know if that works,
  Sage

• 

  growthjack · Member · Oct 2, 2016 at 6:35 am

  • Copy link

  mobile screen 2Thanks Sage for getting back to me. The result was Screen 1
  I removed the width attribute to align it with the logo. The code that you gave me:

  @media screen and (min-width: 44.375em) {
  	.main-navigation .primary-menu {
  		background-color: #FF0;
  		margin: -4.3rem .5em 3em 20em;
  		z-index: 999 !important;
  		position: relative;
  		font-size: .8rem;
  	}
  }

  The menu items, on mobile, are better aligned but they still hang over the site content. mobile screen 1

  I am grateful for your help and support.
  Deepak

• 

  growthjack · Member · Oct 2, 2016 at 6:37 am

  • Copy link

  Apologies. The mobile screen 2 link was intended to follow mobile screen 1 link above. Thanks,

• 

  innisfreehomestead · Member · Oct 3, 2016 at 7:44 pm

  • Copy link

  Hey there,

  Sorry for my delayed response! If you take out the last code I gave you, this should work better:

  @media screen and (max-width: 910px)
  .main-navigation .primary-menu {
  	background-color: #FF0 !important;
  	margin: 0 !important;
  	z-index: 999 !important;
  	position: relative !important;
  	font-size: .8rem;
  	width: 100%;
  }

  Let me know if that does it,
  Sage