Home>Support>Questions on navigation and round icons – Vantage

Questions on navigation and round icons – Vantage

By Yifan Jiang, 10 years ago. Last reply by Andrew Misplon, 10 years ago.

Hi Site Origin,

I really love your Vantage theme and am building a site with it.
However there are 2 tech difficulty that need your help with.

a) is it possible to put a logo on the navigation bar (and remove the header so the page begin with the navi)?

b) i’m putting those icon and texts by using your Page Builder plugin, is there a way to upload my own icons for these?

Or are these functions actually available in the Vantage Premium?

Thanks!
Yifan

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Yifan

    Thanks for running Vantage.

    1. Yes, Appearance > Theme Settings > Layout > Masthead Layout: Logo in Menu. The logo size gets constrained in this type of layout, insert the following under Appearance > Custom CSS to reverse that:

    /* Vantage Remove Logo in Menu img constraint */

header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}

    b. It depends on the widget. The Circle Icon widget lets you select None for the icon, you can then use the Background URL field to enter your own image from the media library. Our Features Widget also lets you upload your own icon:

    http://wordpress.org/plugins/so-widgets-bundle/

    Nothing discussed here is specific to Premium.

  2. 10 years, 1 month ago Yifan Jiang

    Hi Andrew,

    Thanks a lot for the tip and it works :)

    However my team is asking for another visual twist that I need your help with.

    Now that the logo is in the menu, is there a way to make it reach it out down into the main body a little?
    That is making the menu bar thinner than the logo.

    Thanks!

  3. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    For sure. To this you’ll need to:

    Remove the logo float and absolute position it:

    header#masthead.masthead-logo-in-menu .logo {
float: none !important;
position: absolute;
left: 0;
top: 30px;
}

    Then push the menu over:

    .main-navigation ul {
margin-left: 200px;
}

    Just neaten up my numbers to your requirements.

  4. 10 years, 1 month ago Yifan Jiang

    Hi Andrew,

    Thanks a lot for the codes, it works on every page except the homepage with a meta slider right under the menu.

    It seems the slider is overlaid on top of everything else and covers the part of that logo.

    (homepage is build with page builder)

    anything we can do to fix that?

    Thanks!

  5. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Try setting a logo z-index:

    header#masthead.masthead-logo-in-menu .logo {
z-index: 9000;
}

    Just add the one line, the z-index to your existing header#masthead…. selector. Increase 9000 to a higher number if it’s still underneath the slider.

    Ref: http://www.w3schools.com/cssref/pr_pos_z-index.asp

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More