Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Dear Experts,
I would like to have the logo (picture with name) as header in full width of the page and that for all displays (responsive). Unfortunately there is free space around the picture.
I tried some code changes I found in other threads in Custom CSS already. Without success.
I’m totally new. Any help is highly appreciated.
Thanks, Udo
Hi Udo,
Preface: Please note that your logo has spacing in the image itself so this means that there will be some spacing. I would recommend removing it from the image.
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
.hgroup { max-width: none !important; } .logo img { width: 100%; height: auto !important; } .logo, #masthead, .hgroup { padding: 0 !important; }Remove the following CSS:
header#masthead { padding: 0 !important; } header#masthead .hgroup { padding: 0 !important; } header#masthead .hgroup .logo img { height: auto; width: 1080px; } .main-navigation { margin: 0 !important; }You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Thanks, that works, at least for bigger screens. But when looking at the iPhone there is still space underneath the logo (between logo and menu).
BTW: Thanks for letting me know that there was spacing in the picture itself. I changed this as well.
Additionally I removed the qTranslate-X language switcher widget from the header. With the widget in the header I could not avoid the spacing between logo and menu at all. Or do you have an idea for this also? It looks better to have the language switch in the header instead the footer or sidebar.
Many thanks in advance, Udo
Hi Udo,
Preface: Please be aware that issues may arise from using the qTranslate-X plugin as SiteOrigin Page Builder isn’t completely compatible with it. Consider switching to either Polylang (free) or WPML (paid).
I can’t seem to see a space anymore.
Could you please try clearing your browser cache? If that doesn’t help, could you send me a screenshot of what you’re seeing?
Thanks Alex,
The space is present on small displays of mobile devices like iPhone. Unfortunately it seems I’m not able to embed images here in the thread. You would see the space between the logo and the menu by selecting my page (neunbrunnwirt.at) on your mobile.
Or I guess you can enter my page as admin, can’t you? If so you could check the different screen views by using the Adjust menu.
BTW: By using the Adjust menu the menu of my homepage appears double or even triple, depending on the selected screen size view. This disappearas as soon as I leave the Adjust menu. Is it a bug or did I anything wrong with my settings?
Many thanks, Udo
Hi Udo,
Ah, I see what you mean. Try adding the following CSS to WP Admin > Appearance > Custom CSS:
.support-text { display: none !important; }We cannot access your page as an admin. Unless you specifically create us (or anyone) an admin account, they cannot access that area. It should be noted we do not need an account created.
Regarding your “BTW”, you look to have worked that out but basically, due to your setup (navigation settings and menu items) at smaller resolutions items were being pushed onto a different line due to a lack of available width. You managed to resolve this by increasing the Mobile Menu Collapse.
If you didn’t make any adjustments, don’t worry; that’ll only happen in the customizer.
Many thanks Alex, it works. You can close the thread as solved. Thanks, Udo