Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 26, 2013 at 1:34 pm #23845
    gamesymphonies

    By default, the menu appears under the logo on the left; I’m trying to centre it instead.

    So far in Quick CSS, I’ve got rid of the search box:

    #top #menu-item-search {

    display: none;

    }

    I’ve also tried to use an auto-margin technique to centre:

    #top .main_menu {

    margin: 0 auto;

    float: none !important;

    left: auto;

    }

    Having no effect though, menu still is on the left. What am I missing?

    The only way I could get it to move from the left was to add in a “width” element:

    #top .main_menu {

    margin: 0 auto;

    width: 500px;

    float: none !important;

    left: auto;

    }

    But then the positioning of the menu varied depending on the width I entered. Choosing “width: 100%” had no effect at all.

    Hoping someone can shed some light (on what is probably very bad CSS from me)

    Loving this theme otherwise :)

    May 27, 2013 at 3:22 am #121359
    Ismael

    Hi,

    Maybe this will work.

    #header_main_alternate .container {
    
padding-left: 19%;
    
}

    Use Media Queries to target specific screen sizes.

    Regards,

    Ismael

    May 27, 2013 at 8:13 am #121360
    gamesymphonies

    Many thanks for taking the time to reply to this.

    By tweaking your supplied percentage value, I can make the menu seem “centered”. However, the value that centers in Firefox does not produce a centered outcome in Safari. So to make this work, I’d need to have a different value for every possible permutation of browser and screen resolution :(

    Is there no way to get this done using something like a left and right “auto” margin, so that the menu element is automatically and mathematically centred, without having to resort to a nudge-from-the-left hack?

    May 28, 2013 at 2:16 pm #121361
    Devin

    Hi gamesymphonies,

    Unfortunately, the margin auto trick only works when the item has a defined width. So you would need to set the width for the item then you could use it.

    It isn’t a bit deal if you don’t modify the menu very often but is custom to each individual menu.

    Regards,

    Devin

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘How to centre menu with "Header with Social Icons and bottom navigation"’ is closed to new replies.