CSS for preventing overlap of menu icon with custom header on small screens
-
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)
-
Hi johnbrookswriting
Try this and let me know if it works for you.
.menu-toggle:before { padding-top: 10px; } -
-
-
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-2504974You 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.)
- The topic ‘CSS for preventing overlap of menu icon with custom header on small screens’ is closed to new replies.