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!
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!
Thanks for the reply! Here's the link: www.www.themusicrowshow.com/CMS4/index.php...
If you look in the Developer Tools you can see that on line 8 of iGotStyle.css there is a definition that is
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.
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.
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?
You will need to either add an HTML block to that area after the Social block that has
Or you will need to go into the files for the theme you are using on your server and update the iGotStyle.css file
<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
You are a genius! :) The html idea worked great. Very much appreciate your help.
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.