[Resolved] Primary menu width

Home Forums Support [Resolved] Primary menu width

Home Forums Support Primary menu width

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #337263
    Richard

    Hi,

    When I customise the primary menu width it also changes the width/look of the drop-down list. The drop down only looks good if I set the menu item width to something small an I want to increase the menu width. Is there any way of preventing this from happening?

    I want my logo to be at the top and centre of my page and not to the left (as default in GP) with the primary menu beneath the logo and centred. When I adjust the width of the primary menu so that the spacing looks better, it alters the way the drop down looks.

    I’ve been looking through your site and noticed that the following site:

    http://demo.wpcatholicsites.com/

    seems to have achieved this.

    Any advice would be greatly appreciated.

    My current site is live and it is using the default GP layout which I want to change.

    Kind regards,

    Richard – UK

    #337410
    Leo
    Staff
    Customer Support

    Hi there,

    That’s weird…The sub menu width shouldn’t change when you change the parent menu item width:
    https://docs.generatepress.com/article/menu-item-height-width/#width

    The sub menu item width should be default at 200px unless you have this CSS added:
    https://generatepress.com/forums/topic/sub-menu-item-width/#post-310762

    Can you provide a link to your site?

    #337453
    Tom
    Lead Developer
    Lead Developer

    The sub-menu items will have the same left/right padding as the top level item so the text all lines up nicely.

    You can adjust it like this:

    .main-navigation .main-nav ul ul li a {
        padding-left: 20px;
        padding-right: 20px;
    }
    #337544
    Richard

    Thanks for your help although having followed your advice, I still can’t effect any change.

    Please could you look at my site: http://www.acousticpercussion.com

    When you click on the ‘products’ tab, notice how the drop down menu is all odd. The words should be in one sentence like at the bottom ‘Arena series’ but I can’t figure out how to get this to be the case for all the others. It will only change if I reduce the width or the primary menu so that all the links (ie the links you see at the tope of the page before clicking on anything) are much closer together.

    I want the primary menu to be spread out but as you can see it has an effect on the way the drop down looks.

    My site is live and I’m really worried as it looks bad in my opinion.

    Really hope you can help and I’m so grateful for your help.

    All best,

    Richard

    #337556
    Leo
    Staff
    Customer Support

    I would try the following steps:
    – Looks like you want to remove the drop down arrow. If so try this CSS:

    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 51px;
    }

    The padding-right px number should be the same as the number in menu item width:
    https://docs.generatepress.com/article/menu-item-height-width/#width

    – Then adjust the sub menu item width with this CSS:

    .main-navigation ul ul {
          width: 200px;
    }

    Let me know if this helps.

    #337566
    Richard

    Thanks Leo,

    Although the drop down menu is much wider than I had rather hoped for, it does at least work and I’m happy to live with this. All text in the drop down menu sits on one line now and that’s exactly what I wanted to achieve!

    Out of interest, if I wanted to implement a drop down like on this site: http://demo.wpcatholicsites.com/
    do you know how I could go about it?

    Your customer support is second to none!

    Thanks again,

    All best,

    Richard

    #337574
    Leo
    Staff
    Customer Support

    That site is actually using the Max Mega Menu plugin: https://en-ca.wordpress.org/plugins/megamenu/

    You can try a simpler version using some CSS: https://docs.generatepress.com/article/building-simple-mega-menu/

    #337576
    Leo
    Staff
    Customer Support

    Also there is a lot padding in the sub menu items which is why they are wide.

    You can change it using Tom’s code here: https://generatepress.com/forums/topic/primary-menu-width/#post-337453

    #337577
    Richard

    Thanks Leo!

    What super support!

    All best,

    Richard

    #337580
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.