Hi,
In trying to edit the header of my page on which I use the vantage premium theme, I discovered that unlike the rest of the page, it has become a very hard thing to do.
I wish to align the logo with the text and the image on the website below, each next to each other, with the text’s top being the same as the logo’s top and the image on the right displaying fully, not hidden due to padding.
I tried intervening with custom css, adding a snippet that I found here, and I am attaching it below, but it starts producing cross-browser problems (chrome displays it differently than firefox), and I am looking for a simpler solution before I dwell into that depth of intervention.
header#masthead .hgroup #header-sidebar {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
Thanks in advance
P.S: the snippet is inactive now so the original issue can be displayed.
Hi pj
Try the following:
#masthead .hgroup #header-sidebar[style] { padding-top: 20px !important; }Hi Andrew,
Thank you for your time. I applied your snippet, but please check the website with chrome & firefox. You’ll see what I’m talking about on firefox.
I’m, unfortunately, not sure why Firefox is positioning the text differently. You can try removing the previous CSS and using the following instead:
/* Header */ @media (min-width: 800px) { header#masthead .hgroup #header-sidebar { margin-top: -37px; } }Thank you, that seems to do the trick currently. Are there any plans to make doing such changes to the masthead not require custom css? E.g how pagebuilder does the rest of the page?
Thanks you again.
Unfortunately, not at this time. The header widget area is intended for a few widgets horizontally aligned and equally spaced from the top and bottom. Once we want more from that, it does, unfortunately, put us in a custom development situation.