This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

32
  1. Magus Staff 10 years, 9 months ago

    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

  2. Lubor Krebs 10 years, 9 months ago

    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

  3. Magus Staff 10 years, 9 months ago

    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

  4. Lubor Krebs 10 years, 5 months ago

    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

  5. Andrew Misplon Staff 10 years, 5 months ago

    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.

  6. Lubor Krebs 10 years, 5 months ago

    sure http://www.vedicmeditation.eu/

  7. Andrew Misplon Staff 10 years, 5 months ago

    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.

  8. Lubor Krebs 10 years, 5 months ago

    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

  9. Andrew Misplon Staff 10 years, 5 months ago

    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;
  }
}
  10. Andrew Misplon Staff 10 years, 5 months ago

    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;
}
  11. Lubor Krebs 10 years, 5 months ago

    nono this is not working, pls look at the site I added few menu items to make the problem really obvious

  12. Andrew Misplon Staff 10 years, 5 months ago

    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.

  13. Andrew Misplon Staff 10 years, 5 months ago

    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?

  14. Andrew Misplon Staff 10 years, 5 months ago

    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.

  15. Lubor Krebs 10 years, 5 months ago

    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

  16. Andrew Misplon Staff 10 years, 5 months ago

    For sure :) Glad we could help out.

  17. Andrew Misplon Staff 10 years, 5 months ago

    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.

  18. Lubor Krebs 10 years, 5 months ago

    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

  19. Andrew Misplon Staff 10 years, 5 months ago

    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.

  20. Lubor Krebs 10 years, 5 months ago

    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.

  21. Andrew Misplon Staff 10 years, 5 months ago

    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.

  22. Andrew Misplon Staff 10 years, 5 months ago

    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.

  23. WordPress Private 10 years, 5 months ago

    This is a private message.

  24. Lubor Krebs 10 years, 5 months ago

    are you logged in?

  25. Lubor Krebs 10 years, 5 months ago

    Andrew are you logged into the site?

  26. Andrew Misplon Staff 10 years, 5 months ago

    Back online now. I’ll be with you ASAP. Thanks for the wait.

  27. Andrew Misplon Private Staff 10 years, 5 months ago

    This is a private message.

  28. Andrew Misplon Staff 10 years, 5 months ago

    Should be all sorted now.

  29. Lubor Krebs 10 years, 5 months ago

    do I need your password?
    i just installed the translator so pretty big changes, pls hold on with your work
    thanks

  30. Andrew Misplon Staff 10 years, 5 months ago

    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.

  31. Lubor Krebs 10 years, 5 months ago

    thank you Andrew, I will take a look and try to understand your work so I can do some adjustments in the future

  32. Andrew Misplon Staff 10 years, 5 months ago

    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 :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread