How would I go about changing the header so that I have three equal columns in which to place three individual images and add text and URL links to all with the end option being that the header will shrink on smaller display screens such as iPad and mobile without overlapping?
Changing Vantage Site Header Layout
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Mike
The best option for this would be to remove your existing logo and header items and then add a PageBuilder Layout Builder Widget to the header widget area. With this you can then add a 3 column row and put your existing items back in.
Let us know how you get on
Magus
Thank you, I will keep you posted on outcome, will attempt tomorrow.
Hi Magus,
I have made an attempt at what you suggested, either unfamiliar with what is required or not doing something correctly. I removed the Visual Editor widget that was in the header and replaced with the Layout builder! I set a row for three column display and then inserted an image icon into each row. It appeared that the 'new header' was still fixed to the right of where the Vantage Theme 'main' logo went as though the 'window' still retained the original column and only left the right hand side to display the new page builder row with three columns! I do not appear to be able to completely clear the header across the page?
Hi Mike
For this to work you will need to remove the logo by going to Appearance->Theme Settings->Logo and clicking on the remove link that appears when you mouse over the logo button. When this is removed the Header Sidebar will stretch to fill the full Header div.
If you want the header to stretch fully across the page you can go to Appearance->Custom CSS and click on the snippets button at the top. From the snippets list select ‘Full Width Layout: Expand Header Content to 100%’ and click on Insert Snippet. Then save the CSS.
Magus
Thank you.
Hi Mike
Glad to see you got it working. If you need any more help please feel free to open a new support thread.
Regards
Magus
After Vantage Premium same problem in masthead. See my custom css to avoid unwanted padding and no title site including mouseover in header widget. Thanks for solutions team Vantage. Still wrestling with images on ipad mouseover..
http://www.ekatra.nl
______________________________________
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
#masthead .site-title {
display:none;
}
/* Header */
@media (max-width: 680px) {
header#masthead .hgroup {
padding-top: 0px;
padding-bottom: 10px;
}
body.responsive header#masthead .hgroup .logo {
padding-top: 13px;
}
}
.mobile-nav-frame {
position: fixed;
top: 0px;
right: 0px;
width: 100%;
height: 100%;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #4ebac4;
font-family: “Helvetica Neue”, Arial, Helvetica, Geneva, sans-serif;
z-index: 999999;
}
.mobile-nav-frame .title {
padding: 14px 12px;
margin-bottom: 25px;
border-bottom: 1px solid #ffffff;
background: #4ebac4;
}
.mobile-nav-frame .title h3 {
margin: 0px 50px;
text-align: center;
color: white;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
overflow: hidden;
height: 1.25em;
font: 200 20px “Helvetica Neue”, Arial, Helvetica, Geneva, sans-serif;
}
.mobile-nav-frame ul {
margin: 0px 12px;
background: #ff8000;
border: 1px solid #fff;
padding: 4px 10px;
-webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075);
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.mobile-nav-frame ul li {
display: block;
padding: 15px 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav-frame ul li a.link {
display: block;
margin-right: 30px;
text-decoration: none;
color: #F3F3F3;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
font-size: 17px;
font-weight: 300;
}