I’m attempting to place a button in the middle of the header while keeping some special text on the right side of the header. While shrinking the width of the browser window, it would be nice if the logo, button and special text would stay horizontaly equidistant from each other in the header. How would you do that?
When the viewport reaches the size of a smartphone, all three stack nicely on top of each other. I’m happy with that.
I set up a child theme to make other modifications to the CSS, but I stripped out everything I did in the child theme so nothing would be affecting the site when you look at it, except for the default CSS you created in the Vantage Premium theme. I did change the padding value of the header using the theme interface.
I found the following code in one of the SiteOrigin forum threads and tried it, but it didn’t seem to do what I was hoping for:
/* Header Sidebar */
header#masthead hgroup #header-sidebar {
width: 900px;
}
/* Vantage increase support text breakpoint */
@media screen and (max-width: 960px) {
body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar {
position: static;
display: block;
margin-top: 30px;
max-width: 100%;
}
}
If you want to look at the website, you can find it at: http://wpdevelopment.equity-title.com
You will need the following credentials:
Username: demo
Password: demo01
Thank you.
Hi MeOnWrdPrs
The above Custom CSS should be good to go, except for hgroup. We recently changed hgroup from a tag to a div class. Please change:
to
To confirm you just need to add a period before the word hgroup, wherever that appears.
Thank you Andrew. I updated the hgroup tag to a class as you suggested. That got the button in the middle of the header as needed. I was hoping to float the special text to the right in the header, but it didn’t work. I used the following CSS in the child theme:
header#masthead .hgroup #header-sidebar aside#text-17 div.et-slogan-header { float:right; }My changes didn’t do anything, so it is now removed. I thought maybe I used the wrong selectors, but if I replace “float:right;” with “margin-left: xx%;”, where xx equals any number, something happens but I get undesirable results.
I’m not sure how to make the special text move to the right side of the header and still be responsive when the viewport shrinks. Do you have any ideas?
Thank you for your help.
The header widgets, beyond a breakpoint, go full width, they don’t fit on mobile so it makes sense to drop them under each other. You can reverse this but only until about 480px. Try this:
@media screen and (max-width: 680px) { body.responsive header#masthead .hgroup #header-sidebar .widget { margin: 0 25px 0 0; float: left; } }But at 480 you need to center them all out again:
@media screen and (max-width: 480px) { body.responsive header#masthead .hgroup #header-sidebar .widget { margin: 0 auto; float: none; } }Thank you for the suggestion. I tried it, but still had some difficulty. I decided to remove the widgets from the header completely. I took the HTML code contained in each of the widgets and put it all together to paste into the “Header Text” field in WordPress under Appearance –> Theme Settings –> Logo tab. I’m sure that isn’t what that field was intended for, but it worked. Since I had classes assigned to the containing DIV tags of what I pasted, I was able to manipulate those DIVs within the div.support-text container. After expanding the width of the div.support-text container by a certain percentage, I floated the two DIVs I pasted in there to either side of the div.support-text container. Then adjusted the top margin to align my elements to the vertical center of the header. I also used media queries to manipulate the elements I pasted when I reduced the width of the browser window. So far, it is working pretty well. I mainly wrote this out for the benefit of someone else to may have a similar problem. Thanks for your help.
There is no problem that I see with this solution. Thanks for taking the time to share your fix with everyone here!