WordPress.org

Ready to get started?Download WordPress

Forums

Mantra
How to stretch the menu bar? (28 posts)

  1. Forest Skills
    Member
    Posted 1 year ago #

    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

  2. Aditya Pandey
    Member
    Posted 1 year ago #

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

  3. Forest Skills
    Member
    Posted 1 year ago #

  4. Aditya Pandey
    Member
    Posted 1 year ago #

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

    #access ul li {
          margin-right: 9px;
    }
  5. Forest Skills
    Member
    Posted 1 year ago #

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

  6. Forest Skills
    Member
    Posted 1 year ago #

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

  7. Forest Skills
    Member
    Posted 1 year ago #

    Nope...

  8. Aditya Pandey
    Member
    Posted 1 year ago #

    You need to stretch it or stick it all together?

  9. Forest Skills
    Member
    Posted 1 year ago #

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

  10. Aditya Pandey
    Member
    Posted 1 year ago #

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

  11. Forest Skills
    Member
    Posted 1 year ago #

    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

  12. Aditya Pandey
    Member
    Posted 1 year ago #

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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  14. Forest Skills
    Member
    Posted 1 year ago #

    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

  15. the.Zedt
    Member
    Posted 1 year ago #

    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.

  16. Forest Skills
    Member
    Posted 1 year ago #

    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

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Did you use the greater than symbols suggested by Zedt?

  18. Forest Skills
    Member
    Posted 1 year ago #

    They turn into gobble-dee-gook. Using a space instead works.

  19. Forest Skills
    Member
    Posted 1 year ago #

    I must admit to not using a standard > as found on a keyboard though...

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't understand the issue, the greater than symbol would be ideal for your solution http://stackoverflow.com/questions/4459821/css-selector-what-is-it

  21. Forest Skills
    Member
    Posted 1 year ago #

    This is the nearest that I can get it to how I want it to look;

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

    #access .menu ul li a {
    padding-top: 8px;
    }

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

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

    Changing anything in the '#access .menu ul li a {' line or the '#access ul li {' line affects everything in the top line and also the sub-menu lines.

    :(

  22. Forest Skills
    Member
    Posted 1 year ago #

    '>' turns into '&gb'

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where are you putting this '>' symbol, where are you making this CSS change?

  24. Forest Skills
    Member
    Posted 1 year ago #

    If I copy and paste 'text > text' into the custom CSS part of mantra, save it, then go and look at it, it has changed to 'text &gb text'.

    Am I doing something wrong?

  25. Forest Skills
    Member
    Posted 1 year ago #

    Correction!!

    '>' turns into '>'

    For example;

    #access .menu > ul > li > a {

    Chris

  26. Andrew
    Forum Moderator
    Posted 1 year ago #

    I think the Custom CSS part of mantra is doing something wrong.
    To explore this, can you install this Custom CSS Manager plugin and use its section of the dashboard to hold your CSS with the '>' symbol. See if in that plugin the greater than symbol does not turn to gobbledegook.

  27. Forest Skills
    Member
    Posted 1 year ago #

    OFFS!!!

    I just typed in '>' turns into & g t ;

    I guess that's what it's supposed to do. Either way, it still changes everything south of there as well.

  28. the.Zedt
    Member
    Posted 1 year ago #

    There's indeed a bug with the > turned into & g t;, but it only affects how the custom CSS is displayed in the dashboard.
    The CSS is correctly included on the frontend, so those rules should work.

    Use Firebug or the browsers built-in dev tools to inspect the applied styling and see how it is processed / overridden.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic