Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble with menu not centering in both web and mobile responsive design

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #177715
    BradG
    Participant

    Hey all, I am building a site using the Ultimatum framework and I can’t seem to get the MegaMenu centered on the mobile responsive design and the web version. I’ve tried to add margin-left but then it moves the menu to the right on the responsive layout. Can someone point me in the right direction to have the 5 menu items centered in both layouts?

    Site is here…

    #177717
    Paulie_D
    Member

    Mega menu?…

    I can see a standard menu…am I missing something?

    #177719
    BradG
    Participant

    The only menu on the page are the 5 links in the grey box and yes it’s using the Mega Menu. I know it’s simple looking but that’s the look they want.

    Here’s part of the CSS…

    .wfm-mega-menu {
      font-family:Arial, sans-serif;
      font-size:13px;
      font-style:normal;
      font-variant:normal;
      font-weight:normal;
      line-height:16px;
    }
    #177723
    Paulie_D
    Member

    Firstly, you have to remove the inline CSS width

    
    <div class="wfm-mega-menu" id="ultimatummenu-4-item" style="width:940px;">
    

    Then I would do this

    
    .wfm-mega-menu ul.menu {
    text-align:center;
    margin: 0 auto;
    }
    

    then

    
    .wfm-mega-menu ul li {
    /* float: left; */  */ Remove this */
    display:inline-block; /* add this */
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: bold;
    }
    
    #177726
    bearhead
    Participant

    I chdecked it out with the developer tools in chrome, and the main issue is coming from the “margin-left: 25%;” you have in the css for the menu ul. Also, that’s why you’re getting that horizontal scroll bar.

    You should remove that, now to center everything there’s probably a few ways to go about it, but I think the least disruptive (to your existing code) way to go about it would be to change the following in your css:

    .ultimative-nav{
    width:408px;
    margin-left: auto;
    margin-right: auto
    }
    .wfm-mega-menu{
    width: auto;
    }
    .menu{
    width: auto;
    /* reme,ber to remove the margin-left: 25%; here!*/
    }
    

    now, you’ll also need to create different css for the menu to accommodate screens under 480px wide, as the total menu length is wider than the containing div at that point. You could either shrink the menu text size and padding, or you could change the display style so that they stack.

    well I hope that helps a little… what you see in chrome’s dev tools don’t always 100% reflect the code in the actual css file so I’m not totally sure how your code looks.

    #177727
    BradG
    Participant

    @atelierbram Okay, that helped to bring the menu to the left on the responsive mobile site (chrome on iPhone).

    There’s still an issue with both though.

    -The responsive mobile site menu is still too big (font-size?)
    -The menu is now wrapping on the main site

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.