Home>Support>Center the links in header area

Center the links in header area

Hi,I’m using Vantage Premium theme and have tried to use Visual Editor to add some links in my header center part.But the links always appear on the right part.How could I add custom css to center them or change their position ?

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

  1. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi

    This is unfortunately the default behaviour of the header sidebar area. If you send through a link so we can view the site I’ll try assist with Custom CSS to resolve.

  2. 9 years, 11 months ago 吴彬斌

    Thanks for your reply.Here is my site link:http://www.nicegz.com/.
    I used some Custom CSS code trying to change the links’s style,but it is always failed.I think maybe I used the wrong class ID.
    Thanks.

  3. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Sure. Try the following under Appearance > Custom CSS:

    /* Header Sidebar */
    
    header#masthead hgroup #header-sidebar { 
    width: 900px;
    }
    
    /* Vantage increase support text breakpoint */
    
    @media screen and (max-width: 960px) {
    body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
    }
    }
    

    Don’t worry too much about the second selector, that just helps a problem with the text crossing over the logo at a certain resolution. The first selector, you can adjust that 900px as required to help center the text you’ve added.

  4. 9 years, 11 months ago 吴彬斌

    Hi Andrew!

    Thank you for your help,it worked!So if I want to change more of the text,I don’t need to change anything in the second selector?

  5. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

    The first selector, where I said 900px, that’s all you need to change to help adjust the positioning. The second selector, if you’d like, you can adjust 960px, that changes when the header breaks into separate lines for tablets and phones.

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