Site logo

[Support request] Drop down menu in secondary

Home › Forums › Support › [Support request] Drop down menu in secondary

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

How to add CSS

How to add PHP

Home › Forums › Support › Drop down menu in secondary

Viewing 14 posts - 16 through 29 (of 29 total)
1 2
  • Author
    Posts
  • April 7, 2022 at 6:44 am #2180954
    David
    Staff
    Customer Support

    OK, in the code i provided here:

    https://generatepress.com/forums/topic/drop-down-menu-in-secondary/#post-2170018

    edit this line:

    <nav id="third-navigation" class="secondary-navigation">

    and change it to:

    <nav id="third-navigation" class="third-navigation">

    Then you need to add this stylesheet to your site:

    .third-navigation {
    z-index: 99;
    padding:0
}

.third-navigation .inside-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content:space-between
}

.third-navigation ul {
    list-style: none;
    margin: 0;
    padding-left:0
}

.third-navigation li {
    position:relative
}

.third-navigation a {
    display: block;
    text-decoration:none
}

.third-navigation ul ul {
    display: block;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    float: left;
    position: absolute;
    left: -99999px;
    opacity: 0;
    z-index: 99999;
    width: 200px;
    text-align: left;
    top: auto;
    transition: opacity 80ms linear;
    transition-delay: 0s;
    pointer-events: none;
    height: 0;
    overflow:hidden
}

.third-navigation ul ul li {
    width:100%
}

.third-navigation ul ul li a {
    line-height: normal;
    font-size:90%
}

.third-navigation.sub-menu-left ul ul {
    box-shadow:-1px 1px 0 rgba(0, 0, 0, .1)
}

.third-navigation.sub-menu-left .sub-menu {
    right:0
}

.third-navigation .main-nav > ul {
    display: flex;
    flex-wrap:wrap
}

.third-navigation .main-nav ul ul li a {
    line-height: normal;
    font-size: 12px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom:10px
}

.third-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 0;
    position:relative
}

.third-navigation .main-nav ul li a {
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    line-height:40px
}

.third-navigation .menu-toggle {
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 40px;
    margin:0
}

.third-navigation .menu-item-has-children .dropdown-menu-toggle {
    padding-right:20px
}

.third-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top:-10px
}

.third-navigation .third-menu-bar-items {
    display: flex;
    align-items: center;
    font-size:13px
}

.third-navigation .menu-bar-item {
    position:relative
}

.third-navigation .menu-bar-item.search-item {
    z-index:20
}

.third-navigation .menu-bar-item > a {
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    line-height:40px
}

.dropdown-hover .third-navigation:not(.toggled) ul li.sfHover > ul, .dropdown-hover .third-navigation:not(.toggled) ul li:hover > ul {
    left: auto;
    opacity: 1;
    transition-delay: 150ms;
    pointer-events: auto;
    height: auto;
    overflow:visible;
    margin-top: 0;
}

.dropdown-hover .third-navigation:not(.toggled) ul ul li.sfHover > ul, .dropdown-hover .third-navigation:not(.toggled) ul ul li:hover > ul {
    left: 100%;
    top:0
}

.dropdown-hover .third-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover > ul, .dropdown-hover .third-navigation.sub-menu-left:not(.toggled) ul ul li:hover > ul {
    right: 100%;
    top: 0;
    left:auto
}

.third-nav-float-right .header-widget {
    margin-left:20px
}

.third-nav-float-right .third-navigation {
    margin-left:auto
}

.third-nav-float-right .third-navigation .main-nav ul ul li a {
    line-height:normal
}

.third-nav-float-right .third-navigation ul ul ul {
    top:0
}

.third-nav-float-right .multi-navigation-wrapper {
    margin-left:auto
}

.third-nav-float-left .multi-navigation-wrapper, .third-nav-float-left .third-navigation {
    margin-right:auto
}

.third-nav-float-left .site-branding, .third-nav-float-left .site-logo {
    order:5
}

.third-nav-float-left:not(.nav-float-right) .header-widget {
    order: -10;
    margin-left: 0;
    margin-right:20px
}

.third-nav-float-left.nav-float-right .site-branding, .third-nav-float-left.nav-float-right .site-logo {
    margin-left: auto;
    margin-right:auto
}

.third-nav-float-left.nav-float-right .header-widget, .third-nav-float-left.nav-float-right .inside-header .main-navigation {
    order:10
}

.third-nav-float-right.nav-float-left .third-navigation {
    order:10
}

.multi-navigation-wrapper {
    display: flex;
    flex-direction:column
}

.widget-area .third-navigation li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width:100%
}

.widget-area .third-navigation ul ul {
    left: 100%;
    top: 0;
    width:220px
}

.third-nav-aligned-right .third-navigation .inside-navigation {
    justify-content:flex-end
}

.third-nav-aligned-right.rtl .third-navigation .inside-navigation {
    justify-content:flex-start
}

.third-nav-aligned-center .third-navigation .inside-navigation {
    justify-content:center
}

.third-nav-aligned-center .third-navigation .main-nav > ul {
    justify-content:center
}

.third-nav-aligned-left.rtl .third-navigation .inside-navigation {
    justify-content:flex-end
}

.dropdown-click .third-navigation ul ul {
    visibility: hidden;
    float:none
}

.dropdown-click .third-navigation ul li.sfHover > ul.toggled-on, .dropdown-click .third-navigation ul.toggled-on {
    left: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow:visible
}

.dropdown-click .third-navigation ul ul ul.toggled-on {
    left: 0;
    top: auto;
    position: relative;
    box-shadow: none;
    border-bottom:1px solid rgba(0, 0, 0, .05)
}

.dropdown-click .third-navigation ul ul li:last-child > ul.toggled-on {
    border-bottom:0
}

.dropdown-click .widget-area .third-navigation ul ul {
    top: auto;
    position: absolute;
    float: none;
    width: 100%;
    left:-99999px
}

.dropdown-click .widget-area .third-navigation ul ul.toggled-on {
    position: relative;
    left: 0;
    right:0
}

.both-right .widget-area .third-navigation ul ul, .both-sidebars .widget-area .inside-right-sidebar .third-navigation ul ul, .right-sidebar .widget-area .third-navigation ul ul {
    left: auto;
    right:100%
}

.dropdown-click.both-right .widget-area .third-navigation ul ul, .dropdown-click.both-sidebars .widget-area .inside-right-sidebar .third-navigation ul ul, .dropdown-click.right-sidebar .widget-area .third-navigation ul ul {
    right:0
}

.dropdown-hover .widget-area .third-navigation:not(.toggled) ul li.sfHover > ul, .dropdown-hover .widget-area .third-navigation:not(.toggled) ul li:hover ul {
    top: 0;
    left: 100%;
    width:220px
}

.dropdown-hover.both-right .widget-area .third-navigation:not(.toggled) ul li.sfHover ul, .dropdown-hover.both-right .widget-area .third-navigation:not(.toggled) ul li:hover ul, .dropdown-hover.both-sidebars .widget-area .inside-right-sidebar .third-navigation:not(.toggled) ul li.sfHover ul, .dropdown-hover.both-sidebars .widget-area .inside-right-sidebar .third-navigation:not(.toggled) ul li:hover ul, .dropdown-hover.right-sidebar .widget-area .third-navigation:not(.toggled) ul li.sfHover ul, .dropdown-hover.right-sidebar .widget-area .third-navigation:not(.toggled) ul li:hover ul {
    right: 100%;
    left:auto
}

.rtl .third-navigation ul ul {
    float: right;
    left: auto;
    right: 0;
    text-align:right
}

.rtl .third-navigation ul ul ul {
    left: auto;
    right:100%
}

.rtl .third-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    transform:rotate(180deg)
}

.third-navigation.has-menu-bar-items .menu-toggle, .third-navigation.has-top-bar .menu-toggle {
    flex-grow:0
}

.third-navigation .top-bar {
    background:0 0
}

.third-navigation .top-bar a {
    display:inline
}

.third-navigation .inside-top-bar {
    padding:0
}

.third-nav-aligned-right .third-navigation .top-bar {
    margin-right:auto
}

.third-nav-aligned-right .third-navigation .top-bar .inside-top-bar .widget {
    margin:0 10px
}

.third-nav-aligned-left .third-navigation .top-bar {
    order: 2;
    margin-left:auto
}

.third-nav-aligned-left .third-navigation .top-bar .inside-top-bar .widget {
    margin-left:10px
}

.third-nav-aligned-center .third-navigation.has-top-bar .inside-top-bar {
    justify-content:center
}

.third-nav-aligned-center .third-navigation.has-top-bar .inside-navigation {
    display: block
}

    The final piece is customizing the third navigation menu item colors. Which will require this CSS:

    /* Parent menu color */
.third-navigation .main-nav ul li a {
    color: #fff;
}
/* Parent menu hover color */
.third-navigation .main-nav ul li:hover a {
    color: #000;
}
/* Sub Menu background color */
.third-navigation .main-nav ul ul {
    background-color: #f00;
}
/* Sub Menu text color */
.third-navigation .main-nav ul ul li a {
    color: #fff;
}
/* Sub Menu hover color */
.third-navigation .main-nav ul ul li:hover  a {
    color: #fff;
}
    April 7, 2022 at 7:00 am #2180968
    Loïc

    OK thanks done … Is there a way to reduce the top bar ?

    Also that secondary menu doe not show up in the sidebar while it shows up in customize

    April 7, 2022 at 7:30 am #2180991
    David
    Staff
    Customer Support

    Edit the widget where you added the shortcode to display the third nav. And remove any line breaks before and after the shortcode.

    Also that secondary menu doe not show up in the sidebar while it shows up in customize

    Is there a menu assigned to it ?

    April 7, 2022 at 10:10 am #2181328
    Loïc

    Second point OK – I forgot to assign menu

    First point – I dont see any line break … Here are the two snipets:

    add_action( ‘init’, function() {
    register_nav_menu(‘third-menu’,__( ‘Third Menu’ ));
    } );
    add_action( ‘hook_name’, function(){
    ?>
    <nav id=”third-navigation” class=”third-navigation”>

    <?php
    wp_nav_menu(
    array(
    ‘theme_location’ => ‘third-menu’,
    ‘container’ => ‘div’,
    ‘container_class’ => ‘main-nav’,
    ‘menu_class’ => ”,
    )
    );
    ?>

    </nav>
    <?php
    });

    function your_shortcode($atts, $content = null) {
    ob_start();
    do_action(‘hook_name’);
    return ob_get_clean();
    }
    add_shortcode(‘portable_hook’, ‘your_shortcode’);

    April 7, 2022 at 10:17 am #2181332
    David
    Staff
    Customer Support

    You added the [portable_hook] shortcode in the Top Bar widget – make sure there are no empty line breaks in the widget.

    April 7, 2022 at 10:57 am #2181366
    Loïc

    seems to work now … Please let me know where I can change the top bar third menu items, bold, increase size …

    April 7, 2022 at 11:10 am #2181372
    Loïc

    https://www.atmostfear-entertainment.com/

    Look how many menus they have …
    I know this guys where on GP before ad changed.

    This third menu should be available as it without coding.

    Thanks anyway for help, I will stick with GP for the time being

    April 7, 2022 at 1:06 pm #2181455
    David
    Staff
    Customer Support

    This CSS:

    .third-navigation .main-nav ul li a {
    color: #fff;
}

    You can add font styles to it ie.

    .third-navigation .main-nav ul li a {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

    And if you want separate styles for the submenu text then edit this CSS:

    .third-navigation .main-nav ul ul li:hover  a {
    color: #fff;
}

    like so:

    .third-navigation .main-nav ul ul li:hover  a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
    April 9, 2022 at 2:56 am #2182870
    Loïc

    Hello,

    “You added the [portable_hook] shortcode in the Top Bar widget – make sure there are no empty line breaks in the widge”
    There is no break line but when I put the widget third menu before, the top bar is too wide. When I put it after, its OK …

    April 9, 2022 at 3:08 am #2182879
    David
    Staff
    Customer Support

    Hmmm… add this CSS to remove the space those extra p are creating:

    .inside-top-bar p {
    margin-bottom: 0;
}
    April 9, 2022 at 12:26 pm #2183351
    Loïc

    Hello,

    Thanks for the help – seems that the top bar is still to0 high despite adding the code …

    April 9, 2022 at 1:19 pm #2183379
    David
    Staff
    Customer Support

    You can remove the margins that a are added to widget list items with this CSS:

    .widget ul li {
    margin-bottom: 0;
}
    April 11, 2022 at 2:37 am #2184724
    Loïc

    Good morning.

    It is still a little too big, sorry to say 🙁
    when comparing two sites
    https://www.monstrous.com/
    https://wordpress-678653-2247028.cloudwaysapps.com

    Thanks

    April 11, 2022 at 4:24 am #2184795
    David
    Staff
    Customer Support

    In the first CSS I provided here:

    https://generatepress.com/forums/topic/drop-down-menu-in-secondary/page/2/#post-2180954

    Look for this: 

    .third-navigation .main-nav ul li a {
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    line-height:40px
}

    The last property is the line-height – reduce the 40px to something smaller

  • Author
    Posts
Viewing 14 posts - 16 through 29 (of 29 total)
1 2
  • You must be logged in to reply to this topic.

Start building better websites today.

Get Started
GeneratePress

GeneratePress

Solutions

Support

© 2026 GeneratePress LLC. GeneratePress® is a registered trademark.