Good evening everyone,
I am looking for some advice. As a complete novice attempting to build my 1st website I have upgraded to the premium version earlier in the hope that the menu would be more responsive in mobile formats. I have checked the site and although it seems more responsive my social media icons are now covering the menu – these are placed in the right hand header within the menu (Vantage Child Theme).
Is there a work around for this or will I need to relocate the social icons?
Thanks in advance.
Just giving this a bump in case it has been missed, it’s been almost 3 days. If it hasn’t been missed and this is the usual timescale for responses I apologise – (new here).
Hi Craig
We’re a little behind at the moment. Taking a look right now, one moment :)
Thanks for the long wait. Let’s try another version of the child theme you’re using. This assumes that you haven’t manually inserted other theme files into the child theme you have running at the moment. If you haven’t:
1. Switch back to Vantage parent theme from Appearance > Themes.
2. Hover over Vantage Child, click Theme Details > Delete bottom right.
3. Download the new child:
https://siteorigin.com/wp-content/uploads/2015/08/vantage-child-menu-widget-area2.zip
4. Install from Appearance > Themes > Add New: Upload Theme > Activate.
Let me know when that’s done and I’ll take another look.
I’m offline for a couple of hours, back after that. Chat then :) Cheers.
Cheers Andrew, that stage is complete so just whenever you are ready.
Working on this now. With you shortly.
This is a private message.
Ok :) Almost there. Sorry for the run around. We’ll have more robust solution when done.
1: Go to Plugins. Do you have SiteOrigin Widgets Bundle installed? If not, click Plugins > Add New, search for it and install.
2. Go to Plugins > SiteOrigin Widgets and ensure Social Media Buttons widget is active.
3. Go to Appearance > Widgets and replace Vantage Social Media Icons with the SiteOrigin Social Media Buttons widget in the Menu widget area.
4. Add your networks back. In the Design and Layout section within the widget, set padding to low.
5. Add the following to Appearance > Custom CSS:
/* Menu */ .site-navigation .widget-area { top: 13px; }Thanks Andrew,
I have completed that stage and the buttons work better on a phone in vertical position but unfortunately if you rotate to horizontal or on the laptop the icons cover some of the menu text.
Cheers,
Craig
Can we try a different direction?
Remove the last rule at Appearance > Custom CSS. Remove everything below /* Menu */ and replace it with:
.site-navigation .widget-area { right: 0; top: 13px;}@media (max-width: 1005px) { .site-navigation .widget-area { left: 50%; margin-left: -127px; top: 80px; }}Also, go to Appearance > Theme Settings > Navigation and increase your Mobile Menu Collapse to 1005.
Hi Andrew,
This has sorted the location of the icons on the site but on mobile site they are sitting underneath the menu bar.
Cheers,
Craig
Nearly there. Replace our previous CSS with:
.site-navigation .widget-area { right: 0; top: 13px; } @media (max-width: 1005px) { .site-navigation .widget-area { left: 50%; margin-left: -63.5px; top: 13px; } }Thanks Andrew,
The above code as good as sorted the issue. Icons were slightly overlapping the logo (Mobile Vertical) so I changed the left margin to -50px and it now appears to be sitting nicely. One thing I am noticing is that the menu button on mobile version seems quite unresponsive on my devices. Sometimes it doesn’t respond, other times it highlights but doesn’t produce the menu. Might just be how it is with it being so small but could you advise?
Thanks for all your help.
Sorry, widget area is overlapping menu button.
Add the following declaration:
to either of the .site-navigation .widget-area rules.
Brilliant! All working, thanks for all your help Andrew.
Awesome :) Thanks for your patience. If anything else comes up, let us know.
All the best.