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
  • #177715

    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…


    Mega menu?…

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


    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;

    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 {
    margin: 0 auto;


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

    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:

    margin-left: auto;
    margin-right: auto
    width: auto;
    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.


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