I’ve tried the code from other posts but they are not solving my problem, I’m assuming because it’s text and not buttons.
I have my logo with more than enough space to the left side of the header area. On the tablet view however, the two buttons are moved over the logo area obscuring it.
Desktop view is fine.
Mobile view is cramped. ( The two buttons are stacked together)
Tablet is overlapping.
Sincerely,
Aston
Hi Aston
Try the following under Appearance > Custom CSS:
/* Vantage Header Responsive Breakpoint */ @media (max-width: 1060px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }That breakpoint should work, increase it if needs be.
Thank you so much! A little fiddling around and I got it looking exactly how I wanted it to!
(I increased the margin on the bottom widget so they weren’t stacked on top of each other. Fixed the problem I was having on phones/small mobile devices.)
Super, thanks for the feedback. Glad you were able to resolve.
I have the same problem with button overlapping the logo, but can’t figure out which line of code to change for adjustment. Have been playing with % and px amounts, but no difference when viewed on mobile.