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].
Hi how can manipulate with header layout? I woul like to put the logo to the right side and Menu widget to the left side.
thank you
Lubor
Hi Lubor Krebs
You can change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
#masthead .hgroup .logo, #masthead .hgroup .site-logo-link { float: right !important; } #masthead .hgroup #header-sidebar { right: auto !important; }Let us know how you get on
Magus
thanks it works very well.
I would like to learn some CSS. Looking on your example I found that . and # is class and element.
How can I find the classes and elements defined in Vantage theme?
thanks
LK
Hi Lubor
You are almost correct. . is class and # is id. Here is a link to give you some more information on creating your own Custom CSS
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
Hope this helps
Magus
Hi
one more question to this topic. Is it possible to set that menu items would “wrap” to another line before they kinda overlap into logo?
thanks Lubor
Hi Lubor
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
sure http://www.vedicmeditation.eu/
Thanks :) Here is what I recommend. Remove your logo from the header widget area and instead, add it to Appearance > Theme Settings > Logo. Next, go to Appearance > Custom CSS and insert the following:
/* Right Align Logo */ header#masthead .hgroup .support-text { left: 0; } header#masthead .hgroup #header-sidebar { left: 0; } header#masthead .hgroup .logo { float: right; }That’ll make your logo clickable which should be a good usability improvement.
Once that’s done I’ll need to take another look and try adjust further.
Hi Andrew,
logo is clickable as soon as I remove few items from menu and they do not reach all the way to logo.
My custom CSS is currently this:
/* Home */.home #main {padding-top: 0;}#masthead .hgroup .logo, #masthead .hgroup .site-logo-link { float: right !important;}#masthead .hgroup #header-sidebar { right: auto !important;}/* Vantage Horizontal Footer Menu */#footer-widgets .widget.widget_nav_menu {width: 100%;}#footer-widgets .widget.widget_nav_menu ul {text-align: center;}#footer-widgets .widget.widget_nav_menu li {display: inline-block;float: none;margin-right: 16px;}#footer-widgets .widget.widget_nav_menu li:before {content: "07C";font-family: FontAwesome;margin-right: 16px;}#footer-widgets .widget.widget_nav_menu li:first-of-type:before {content: none;margin-right: 0;}#footer-widgets .widget.widget_nav_menu li:last-of-type {margin-right: 0;}It was recommended by Magus in above posts.
pls review it and recommend changes.
thanks
Lubor
Thanks :)
Let’s try the following added to Appearance > Custom CSS:
/* Vantage Header Responsive Breakpoint */ @media (max-width: 960px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }Finally, let’s try adding this to better align your mobile menu icon:
/* Mobile Menu */ #header-sidebar .widget_nav_menu ul.menu > li > a { line-height: 96px; }nono this is not working, pls look at the site I added few menu items to make the problem really obvious
Sure. The breakpoint we used in my Custom CSS assumed that your menu items only cross over the logo below 960px. It doesn’t resolve for this scenario.
We could fix this but are you sure you want your menu on two lines as the default position? I can resolve it so that as the screen gets smaller your items drop onto two lines but do you want it like that right now, in the full site view?
Another option is to reduce the horizontal menu padding:
/* Menu Padding Horizontal */ .main-navigation ul li a { padding-right: 25px; padding-left: 25px; }Adjust as required.
thanks Andrew, menu on two lines is fine with me, i dont think that padding reduction would help because I will add more menu items as time goes and it would arrive to logo anyway :-)
thanks
Lubor
For sure :) Glad we could help out.
The main reason we’re battling is because you’re using the header widget are custom menu. It’s not really intended for this setup, that’s why the overlap issue. So to get items dropping down onto two lines we ideally need to now move over to Theme Settings > Layout > Masthead Layout > Logo in Menu. I’ll then fix up from there.
ok done
and I left masthead menu as empty so no menu at the site. Pls advice next steps quickly I dont wanna leave the site without menu.
thanks
Go to Appearance > Menus and assign a menu to the theme’s primary menu location.
Ensure your logo is added at Appearance > Theme Settings > Logo.
If you mean the checkbox all down on the Menus page then it is check and logo is added as well. I am back online now so will chcek for your answer more frequent.
Not sure then. The header isn’t populating at all. Are you running a caching plugin? If so, try clearing its cache.
Beyond that I’d need to take a look. Instructions for that event to follow.
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
are you logged in?
Andrew are you logged into the site?
Back online now. I’ll be with you ASAP. Thanks for the wait.
This is a private message.
Should be all sorted now.
do I need your password?
i just installed the translator so pretty big changes, pls hold on with your work
thanks
I’m all done, the menu issue should be resolved.
We’re not running a CRM. The password is a private message just for us. It’s in case we need it later.
thank you Andrew, I will take a look and try to understand your work so I can do some adjustments in the future
I just tweaked Custom CSS a little to right align the logo, you’ll see the changes near the top. Otherwise everything else is standard theme settings.
All the best :)