Logo & Social Media Icon Overlapping

[pagerun 0]

When I make the browser smaller, to the size of mobile, by default the logo and social media icons (the right part of the header) overlap. Pretty much every pagelines website I've seen does the same thing - its not a good look.

Ideally the social media icon should automatically go below the logo for mobile sized browsers. How can this be done?

Thanks

[Danny+ 1,327]

Hi,

Not sure what you mean tbh, when I view my test site on my iPhone, I get the following result.

http://d.pr/i/WENr

Or are you saying it should looking something like this ?

http://d.pr/i/FJEU

[pagerun 0]

For using the icons, I'd be curious to know how to do that - yes..

On my actual site, I have substituted the icons for text by using the add_action 'pagelines_branding_icons_end' and then the function.

Works fine, but when I check the iphone and also a small browser size, it overlaps. Logo and text

So I'm looking for a way to push it over to the next line.

Thanks

[catrina 103]

You should try using the browser specific CSS plugin. This will allow you to use custom CSS specifically for the iPhone so that the icons don't overlap on the mobile browser: http://www.pagelines.com/store/plugins/browser-css/. For further instruction on how to use it, please see: http://www.pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage