Support » Theme: Mantra » How to stretch the menu bar?

  • Hello again folks!

    I’m using Mantra (latest version) and FAQ C23 states that you can centre the menu by inputting the example CSS into the Custom CSS field (which I have done). It works, but it doesn’t stretch the menu to fill the whole page width.

    For reference:
    ▶ C23. How can I center my menu?

    As there is no option concerning the alignment of the menu, you need to use custom CSS:

    #access, #access .menu { text-align:center; }

    #access ul li { float: none; display: inline-block; }

    #access ul ul a { text-align: left; }

    If you’d rather align the menu to the right of the site, change the first line to

    #access, #access .menu { text-align:right; }

    So, does anyone have any ideas on what needs to be changed in this CSS to stretch it across the full width of the page?

    Chris

Viewing 15 replies - 1 through 15 (of 27 total)
  • Can you give me link to your site where this issue belongs?

    I can’t found any trivial method but this is the work around:

    #access ul li {
          margin-right: 9px;
    }

    Thanks. Looks a bit “toothy” when you do that though. :/

    I wonder if adding margin-left: 0px & margin-right: 0px would sort it?…

    Nope…

    You need to stretch it or stick it all together?

    Stretch it to fit the screen width (ie if I reduce the number of tabs to say 4, then I want them to be a 1/4 of the sites entire width).

    Maybe possible.
    Well I don’t know how to do that.

    Getting there:
    ‘#access, #access .menu {
    text-align: center;
    vertical-align: middle;
    }

    #access ul li {
    float: none;
    display: inline-block;
    width: 187px;
    height: 35px;
    }

    #access ul ul a {
    text-align: left;
    }

    Sadly ‘vertical-align: middle;’ doesn’t seem to work & adding ‘padding-top’ affects all of the sub-menu headings.

    Chris

    I think I didn’t got you last time, what you wanted. And neither this time.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    It works, but it doesn’t stretch the menu to fill the whole page width.

    Sorry, it’s difficult to understand what you mean because it doesn’t seem like something can be 100% width of the screen and be centred.

    Can you elaborate and provide an illustrative example of what you want?

    http://www.forestskillsltd.co.uk

    Andrew –

    Originally the inline-blocks were all left justified. This has now been resolved with;

    #access, #access .menu {
    text-align: center;
    }

    And I’ve stretched the blocks by using;

    #access ul li {
    width: 187px;
    }

    And although I can increase their height by using;

    #access ul li {
    height: 45px;
    }

    for example, that leaves the text in the block at a predetermined (in another CSS somewhere) distance from the top. If I fiddle with it and add something like;

    #access ul li {
    padding-top: 15px;
    }

    for example, (or the equivalent for bold text or larger text) then it applies this to the subsequent sub-menus (‘#access ul ul a {..’) as well. Even if I put in (what I think is) the appropriate un-doing code.

    So what I’d really like to have is the text in the current navigation bar (home, courses, shop, etc) in a larger font & in bold and centered vertically in their inline-blocks, but without changing any of the formatting of the sub-menus.

    Hope that makes sense!

    Chris

    Use #access .menu > ul > li > a to affect the top items of the menu only.
    Or #access .menu > ul > li depending on what you are trying to change.

    No dice. Using this (below) still effects the sub-menu items equally;

    #access, #access .menu {
    text-align: center;
    }

    #access .menu ul li a {
    float: none;
    display: inline-block;
    width: 143px;
    height: 35px;
    padding-top: 15px;
    font-size: 1.5em;
    }

    #access ul ul a {
    text-align: left;
    }

    Any ideas?

    Chris

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘How to stretch the menu bar?’ is closed to new replies.