[Resolved] Button sub menu css adjustment

Home Forums Support [Resolved] Button sub menu css adjustment

Home Forums Support Button sub menu css adjustment

  • This topic has 5 replies, 2 voices, and was last updated 4 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1212453
    johnaps

    Can i get some help styling the submenu that a button on my secondary menu opens?
    First problem is that the submenu is hidden by main menu bar

    View post on imgur.com

    The button appears to logged in user, so you ll have to login… i have sent wp credentials for a simple user so you can see the button in question to your contact form in a previous thread
    (https://generatepress.com/forums/topic/button-on-secondary-menu-not-working/)

    Lastly i am trying to make it look like this

    View post on imgur.com


    I dont care about the Multi columns. I care only about the styling and the sign in button which maybe tricky because it needs to be inside the submenu and be shown only to unlogged users…

    Tom said in previous thread “the shadow/arrow part should be do-able” does he mean about the arrow inside the button? or the pointer where the form touches the button?

    I appreciate your help!

    I am excited and eager for this, i wanted to achieve this look a long time!!! πŸ˜€

    #1213293
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not sure you’ll be able to add the button and get the exact layout you need with the standard sub-menu. You may want to experiment with a few mega-menu plugins, which should be able to achieve that kind of sub-menu layout. There are tons of them out there, so it’s worth trying a few.

    #1213306
    johnaps

    Ok if we leave out the button, can you help me out with the overflow problem and the styling??

    I dint want to overload my site more with plugins especially mega menu plugins

    #1213502
    Tom
    Lead Developer
    Lead Developer

    You can set the color of the sub-menu in Customize > Colors > Secondary Navigation.

    Then, try this CSS:

    #masthead {
        z-index: 9999;
    }
    
    .secondary-navigation ul ul {
        padding: 30px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    .secondary-navigation .main-nav > ul > li > ul:after {
        bottom: 100%;
        left: auto;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;
    }
    #1218398
    johnaps

    Perfect Tom! I only changed z-index to 1500 cause my off canvas menu was dissapearing in 9999, but all else was point on!!!
    You can check it if you want to tell me how it looks!

    Thank you for your help πŸ™‚

    #1218671
    Tom
    Lead Developer
    Lead Developer

    No problem! πŸ™‚

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