WordPress.org

Support

Support » Themes and Templates » How to stretch the menu bar?

How to stretch the menu bar?

  • Forest Skills
    Member

    @forest-skills

    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)
  • Aditya Pandey
    Member

    @callingmedic911

    Can you give me link to your site where this issue belongs?

    Forest Skills
    Member

    @forest-skills

    Aditya Pandey
    Member

    @callingmedic911

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

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

    @forest-skills

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

    Forest Skills
    Member

    @forest-skills

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

    Forest Skills
    Member

    @forest-skills

    Nope…

    Aditya Pandey
    Member

    @callingmedic911

    You need to stretch it or stick it all together?

    Forest Skills
    Member

    @forest-skills

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

    Aditya Pandey
    Member

    @callingmedic911

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

    Forest Skills
    Member

    @forest-skills

    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

    Aditya Pandey
    Member

    @callingmedic911

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

    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?

    Forest Skills
    Member

    @forest-skills

    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

    the.Zedt
    Member

    @doryan-gray

    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.

    Forest Skills
    Member

    @forest-skills

    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.