menu design

• 

  nickquested · Member · Feb 14, 2017 at 3:26 pm

  • Copy link
  • Add topic to favorites

  Hi there! The menu on my website here: https://nickquested.com/ takes up the whole screen when clicked. I noticed that if I made the window smaller or viewed it on a tablet, the menu was a lot smaller and didn’t take up the entire page; is it possible to have that same effect with full screen? If so, can someone help me with that code? Thank you!

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

• 

  thesacredpath · Member · Feb 14, 2017 at 8:17 pm

  • Copy link

  Hi there, we can redo the menu so that it looks like on tablets and smaller screens, but currently the menu takes up less vertical space on larger screens, which means people don’t have to scroll as far down to see the content below. I’m thinking that you will not actually be gaining much with this change. What about tightening up the spacing on things so that it takes less vertical space on larger screens? Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.

  @media screen and (min-width: 1024px) {
    .primary-navigation .menu-primary {
      padding-bottom: 15px !important;
    }
    .primary-navigation {
      padding-top: 15px !important;
    }
    .secondary-navigation {
      padding-top: 10px !important;
      padding-bottom: 10px !important
    }
    .primary-navigation .menu-primary > ul > li {
      margin-bottom: 12px !important;
    }
  }