Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Suntura

    (@suntura)

    Hi Tom,

    Thanks for the reply, I’ve been working on this for the last hour or so. I’ve now deicded to just make my whole site responsive with percentages.

    Ive set the main content containers to 70% with padding of 15% each side and done the same for the mega-menu sub-menu and headers. This way as the window shrinks so does the menu and content and it still has the full width effect but with the contained mega menus. Then as the screen size passes 1250px I will use a few @media css rule steps to decrease the amount of padding to 10% or 5% and the content relatively to 80% and 90% as the screen size shrinks until it hits the 600px and goes into mobile version.

    It looks OK at the moment and seems to work well. Hopefully will be able to get it all working nicely eventually.

    Thanks again!

    Thread Starter Suntura

    (@suntura)

    Looking at the code, I see my issue is the ul for the sub-menu is outputted contained inside the ul of the main-menu so if I set the width on the main-menu the sub-menu has to adapt. Is there a way to output the sub-menu separate? So pul it out of the main menu ul and output it once the main-menu ul has been closed so it can have its own width?

    Ideally an output something like:

    <div id="menu-container">
    <div class="main-menu-wrap"><ul class="main-menu">
    <li></li>
    <li></li>
    </ul>
    </div>
    <div class="sub-menu-wrap"><ul class="sub-menu">
    <li></li>
    <li></li>
    </ul>
    </div>
    </div>

    That way I can set both uls to have a max-width of 1250px and margin 0 auto, whilst keeping both containers 100% width of the page.

    Any help much appreciated!! 🙂

    Thread Starter Suntura

    (@suntura)

    No worries I’ve fixed it, I just need to put the .wpcf7 class before the normalise values 🙂

    Hopefully should all line up now and stay the same in all browsers…

Viewing 3 replies - 1 through 3 (of 3 total)