CSS for preventing overlap of menu icon with custom header on small screens

• 

  johnbrookswriting · Member · Nov 12, 2015 at 10:13 am

  • Copy link
  • Add topic to favorites

  I’ve created and implemented a custom header for my site, johnbrookswriting.com . The header itself (“johnbrookswriting” and a tilted “j”/semi-colon against a black background) looks fine; the problem is that on my iPhone (and, I assume, other small screen devices) and even on my computer when I reduce the horizontal dimension of the window enough, the 3 forward slash lines that I implemented as the menu icon overlap with the bottom left edge of the header’s black background.

  Is there any CSS or other means for keeping the menu icon — the 3 forward slash lines — separate from the header background, with just a bit of white space in between, so there’s no overlap?

  Grateful for any help.

  Site/Blog: johnbrookswriting.com

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

• 

  g471n · Member · Nov 12, 2015 at 11:50 am

  • Copy link

  Hi johnbrookswriting

  Try this and let me know if it works for you.

  .menu-toggle:before {
      padding-top: 10px;
  }

• 

  johnbrookswriting · Member · Nov 12, 2015 at 12:19 pm

  • Copy link

  Hi g471n,
  The CSS you suggested worked like a charm—thanks so much!
  John

• 

  g471n · Member · Nov 12, 2015 at 12:39 pm

  • Copy link

  Fantastic :)

  You are welcome.

• 

  johnbrookswriting · Member · Nov 25, 2015 at 7:22 am

  • Copy link

  Hello g471n,

  Thank you again for your help with the above.

  I just posted another forum forum topic, at:
  https://en.forums.wordpress.com/topic/separate-background-color-for-menu-bar-menu-bar-search-widget-related-features?replies=1#post-2504974

  You were so helpful with the above; if you’re able to provide any help with this new topic as well, I would be very grateful.

  (But if you’re not able to, no problem, of course.)