Header AutoNav and Social Links

Permalink
I'm having an issue where my site-wide header. It has autonav and social links in it and looks different in edit mode vs when published.

In edit mode, the social links are stacked on top of the nav - which is the way I want it.

When published, it displays the all in a row.

Attached are two jpgs that show what I mean. How do I get it to look stacked like in Edit mode? I've fiddled with it every which way and nothing I do makes a difference. Using 5.7.3.1 and the theme is Fruitful. Also, notice that the search icon shows up twice in Edit mode (stacked) and only once when published (straight).

Any help would be appreciated!

2 Attachments

HeinoM
 
hutman replied on at Permalink Reply
hutman
Could you provide a link to your site?

This is more than likely an issue with the CSS where the Social Icons/Search are floating to the right, in edit mode (with the border showing) they stack because they won't both fit on one line, but when published they fit so they float side by side.
HeinoM replied on at Permalink Reply
HeinoM
Thanks for the reply! Here's the link: www.www.themusicrowshow.com/CMS4/index.php...
hutman replied on at Permalink Reply
hutman
If you look in the Developer Tools you can see that on line 8 of iGotStyle.css there is a definition that is

header#siteHeader nav ul{ float: right; padding-right: 40px; }


Because your social icons are a ul and they are in the #siteheader nav they are floating to the right. You will need to add something to the styles that would clear the float after the social icons block.
HeinoM replied on at Permalink Reply
HeinoM
Hmmm. OK. I'm a new to C5, so I have no idea how to do that. Can you point me in the right direction so i can figure it out?
hutman replied on at Permalink Best Answer Reply
hutman
You will need to either add an HTML block to that area after the Social block that has

<div style="clear: both;"></div>


Or you will need to go into the files for the theme you are using on your server and update the iGotStyle.css file
HeinoM replied on at Permalink Reply
HeinoM
You are a genius! :) The html idea worked great. Very much appreciate your help.