How to horizontally center-align the global navigation on Sigma

Maria de Vos's Avatar

Maria de Vos

21 May, 2012 12:15 PM

Okay thank you. And then also. I have the SIGMA skin. Is there a way that
I can center my navigation bar

  1. 1 Posted by Briehan Lombaar... on 21 May, 2012 12:17 PM

    Briehan Lombaard's Avatar

    Hi Maria,

    Add the following CSS to the "Header code" field in the "Code" section of your skin settings:

    <style>
    #logo a {
        display: block;
        float: none;
    }
    #global-nav {
        float: none;
        margin: 0;
        text-align: center;
    }
    </style>
    

    This will horizontally align your navigation in the middle below your logo.

  2. Briehan Lombaard closed this discussion on 21 May, 2012 12:17 PM.

  3. Maria de Vos re-opened this discussion on 21 May, 2012 12:21 PM

  4. 2 Posted by Maria de Vos on 21 May, 2012 12:21 PM

    Maria de Vos's Avatar

    Thanks so much :)
    Sent via my BlackBerry from Vodacom - let your email find you!

  5. 3 Posted by Maria de Vos on 21 May, 2012 12:21 PM

    Maria de Vos's Avatar

    Is there a way I can put an image in the background so that I am able to have text over the image? (The text can scroll but the image is static?)
    Sent via my BlackBerry from Vodacom - let your email find you!

  6. 4 Posted by Briehan Lombaar... on 21 May, 2012 01:55 PM

    Briehan Lombaard's Avatar

    Hi Maria,

    Please see this support article to find out how to add background images to your site:
    http://support.withtank.com/kb/adding-stuff-to-your-site/how-to-add...

  7. Briehan Lombaard closed this discussion on 21 May, 2012 01:55 PM.

  8. Maria de Vos re-opened this discussion on 21 May, 2012 04:48 PM

  9. 5 Posted by Maria de Vos on 21 May, 2012 04:49 PM

    Maria de Vos's Avatar

    I did paste this code:

    And it still did not center the menu. What must I do to make it work?

  10. 6 Posted by Briehan Lombaar... on 22 May, 2012 06:30 AM

    Briehan Lombaard's Avatar

    Hi Maria,

    Sorry about that. It should be ul#global-nav and not #global-nav. I've added the correct code to your site so it should be working now.

  11. Briehan Lombaard closed this discussion on 22 May, 2012 06:30 AM.

  12. Maria de Vos re-opened this discussion on 22 May, 2012 12:36 PM

  13. 7 Posted by Maria de Vos on 22 May, 2012 12:36 PM

    Maria de Vos's Avatar

    Thank you so much for the help. I'm sorry I'm gonna keep asking
    questions... Is there a way to create a little bit more space in between
    the menu buttons? They're sooo close to each other?

  14. 8 Posted by Briehan Lombaar... on 22 May, 2012 01:15 PM

    Briehan Lombaard's Avatar

    Hi Maria,

    You will have to make use of custom CSS to do that and we can unfortunately not assist with all CSS-related queries as it is quite a broad topic and there are many resources available online.

    We can also put you in touch with a designer or developer should you require help building a Tank site. Just let us know what your budget is and we'll try to match you with the right person.

  15. Briehan Lombaard closed this discussion on 22 May, 2012 01:15 PM.

  16. Maria de Vos re-opened this discussion on 24 May, 2012 07:06 AM

  17. 9 Posted by Maria de Vos on 24 May, 2012 07:06 AM

    Maria de Vos's Avatar

    I have changed my skin to charlie2.0 and now the menu doesn't want to be in
    the middle even though I've put in the code u gave me... is it different
    for every skin?

  18. 10 Posted by Briehan Lombaar... on 24 May, 2012 08:27 AM

    Briehan Lombaard's Avatar

    Hi Maria,

    Yes, unfortunately it will be different for most skins. You can replace the old code with the following:

    <style>
    .header .logo {
        float: none;
        width: auto;
    }
    .header .navigation {
        clear: both;
        display: inline-block;
        float: none;
        margin: 0;
        text-align: center;
        width: 100%;
    }
    .navigation ul {
        display: inline-block;
        margin: 0;
    }
    </style>
    

    Please keep in mind this is also specific to the Charlie 2.0 skin and will probably need to change if you change the skin.

  19. Briehan Lombaard closed this discussion on 24 May, 2012 08:27 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

18 Sep, 2017 10:42 AM
18 Sep, 2017 09:53 AM
15 Sep, 2017 11:01 AM
14 Sep, 2017 09:04 AM
11 Sep, 2017 08:00 AM