-
Posts
-
We’ve selected “Non-fixed header with social icons and sub menu” for header (although we don’t need the sub-menu)
1. We’d like to float the social icons to the right. Which style would affect this?
2. Realizing we’ll probably need to add a div and some styles to accomplish, we want to put a simple email entry form floated to the left of that same very top area. We’ve tried countless ways to do put this in the header, but not getting far. Any tips?
This shows what we are aiming for (not using this template):
This is our working beta with this template:
Hi,
Please add this code to the Quick CSS area in the Theme options page:
form#customForm{float: left;
margin: 2px 0 0 0;
}
form#customForm label{
display: inline-block;
margin-right: 10px;
}
form#customForm input{
display: inline-block !important;
margin: 0px 2px 0 0 !important;
padding: 4px !important;
}
form#customForm button{
background: gray;
border: 0;
color: white;
padding: 4px 8px;
}
#header .social_bookmarks{
float: right;
}
Then open header.php and add this HTML code inside the .container div in the header section:
<form id="customForm"><label>Join our email list</label><input type="text"><button>Submit</button></form>
The result:
Regards,
Josue
- The topic ‘Right float social icons – and custom items to upper left of header’ is closed to new replies.