cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Need help with secondary NAV expand

kineticcreative123
Contributor ,
Feb 03, 2021 Feb 03, 2021

Hello,

I have a vertical side nav with subs that was expanding from center at 50%. I was having an issue with the menu expanding over content in the header so I changed the translateY(50%) to 100% which worked but now when expanding it's doing this glitchy jerky movement. Can someone help me? I've attached the html file.

 

One other issue is that when on mobile the nav won't let you select a sub nav. When you click the drop down it dissapears like it should but you can't click secondary.

 

Thank you for any help.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
   
    <!-- Page Title -->
	<title>NAV</title>
    <!-- Bundle -->
    <link href="https://www.premierinc.com/external-assets/Premier-2-Point-O/css/bundle.min.css" rel="stylesheet">
    <!-- Plugin Css -->
    <!-- Style Sheet -->
    <link href="https://www.premierinc.com/external-assets/NAV-DELETE/css/nav.css" rel="stylesheet">
	<link href="https://www.premierinc.com/external-assets/NAV-DELETE/css/megamenu.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/css/bundle.min.css">
</head>

<body class="signle-layout">



<!-- Header -->
<header class="header-left">

    <!--Logo-->
    <a  class="logo" href="index-personal.html">
        <h1 class="logo-text"><img src="https://www.premierinc.com/images/icons/PremierLogo_Horiz_White.png" alt="logo"></h1>
    </a>

    <!--Hamburger-->
    <a href="javascript&colon;void(0)" class="sidemenu_btn" id="sidemenu_toggle">
        <span></span>
        <span></span>
        <span></span>
    </a>
    <!-- Navigation & Social buttons -->
    <div class="site-nav">

        <!-- Main menu -->
         <ul style="text-align:left !important;padding-left:25px;" class="site-main-menu alt-font" id="nav">
             <li>
                        <a class="nav-link collapsePagesSideMenu" data-toggle="collapse" href="#sideNavPages2">
                            Brand Principles <i class="fas fa-chevron-down"></i>
                        </a>
                        <div id="sideNavPages2" class="collapse sideNavPages">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Mission</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Vision</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Values</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Purpose</a>
                                </li>
								<li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Position</a>
                                </li>
                            </ul>
                        </div>
                    </li>
            <li>
                        <a class="nav-link collapsePagesSideMenu" data-toggle="collapse" href="#sideNavPages3">
                            Voice <i class="fas fa-chevron-down"></i>
                        </a>
                        <div id="sideNavPages3" class="collapse sideNavPages">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Voice</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Personality</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">APA</a>
                                </li>
                            </ul>
                        </div>
           <li>
                        <a class="nav-link collapsePagesSideMenu" data-toggle="collapse" href="#sideNavPages4">
                            Our Visuals <i class="fas fa-chevron-down"></i>
                        </a>
                        <div id="sideNavPages4" class="collapse sideNavPages">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Logo</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Colors</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Typography</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Imagery</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Icons</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Data Visualization</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Elements</a>
                                </li>
                            </ul>
                        </div>
                    </li>
           
        </ul>
        <!-- /Main menu -->

    </div>

</header>
<!-- Header End -->




<!-- JavaScript -->
<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/bundle.min.js"></script>
<!-- Plugin Js -->


</body>
</html>

 

 

 

TOPICS
Bootstrap , Code
615
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

osgood_
LEGEND , Feb 04, 2021 Feb 04, 2021

Locate the code below in your 'external-assets/NAV-DELETE/js/script.js' file

 

 

 

 

jQuery(function ($) {


    "use strict";

    /* ===================================
        Side Menu
    ====================================== */

   $("#sidemenu_toggle").on("click", function () {
        $(".site-nav").toggleClass("active");
    }),
    
    $(".site-nav li a").on("click", function () {
        $(".site-nav").removeClass("active");
    });


    /* ===================================
         C
...
Translate
replies 6 Replies 6
latest latest Jump to latest reply
BenPleysier Community Expert
Community Expert ,
Feb 03, 2021 Feb 03, 2021

You are missing an ending tag as in

 

BenPleysier_0-1612398304801.png

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Feb 03, 2021 Feb 03, 2021

I can't begin to guess what's going on in your various CSS and JS files.  Unfortunately, HTML alone does NOT tell the whole story. 

For quickest help, post a URL to your online site.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Feb 04, 2021 Feb 04, 2021

You dont need the below (commented /*  */ out). This will stop the jumpy movement.

 

.site-main-menu{
list-style: none;
/* position: absolute; */

/* bottom: 85%; */
/* transform: translateY(100%); */
width: 90%;

/* margin: 0; */

/* padding: 0;; */
text-align: center;
padding-top: 50px;
}

 

However this is a flawed way of setting up your side-menu as you have applied a style of 'overflow: hidden' to your 'header-left' css selector which will result in a user NOT being able to access some of the sub-menus either if their browser window is not of sufficient height OR all the sub-menus are open.

 

I can't even see your menu once it gets down to mobile size so I can't help on that one. My advice would be to consider setting the menu up differently to accomodate most issues as a result of not having enough 'real-estate' space for the sub-menus to grow into.

 

Probably keep the navigation seperate from the header.

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Feb 04, 2021 Feb 04, 2021
In Response To osgood_

Thank you again osgood that worked fine. I got the nav visible in mobile. I was missing a js link. Can you look again to see why it's disapearing? I see what your saying about the real estate now. I removed fixed position and overflow hidden and it works now on my end on desktop but I can't get it to do the same on mobile. I believe that was left over from the original nav that I am restyling.  Below is new code. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
   
    <!-- Page Title -->
	<title>NAV</title>
    <!-- Bundle -->
    <link href="https://www.premierinc.com/external-assets/Premier-2-Point-O/css/bundle.min.css" rel="stylesheet">
    <!-- Plugin Css -->
    <!-- Style Sheet -->
    <link href="https://www.premierinc.com/external-assets/NAV-DELETE/css/nav.css" rel="stylesheet">
	<link href="https://www.premierinc.com/external-assets/NAV-DELETE/css/megamenu.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/css/bundle.min.css">
</head>

<body class="signle-layout">



<!-- Header -->
<header class="header-left">

    <!--Logo-->
    <a  class="logo" href="index-personal.html">
        <h1 class="logo-text"><img src="https://www.premierinc.com/images/icons/PremierLogo_Horiz_White.png" alt="logo"></h1>
    </a>

    <!--Hamburger-->
    <a href="javascript&colon;void(0)" class="sidemenu_btn" id="sidemenu_toggle">
        <span></span>
        <span></span>
        <span></span>
    </a>
    <!-- Navigation & Social buttons -->
    <div class="site-nav">

        <!-- Main menu -->
         <ul style="text-align:left !important;padding-left:25px;" class="site-main-menu alt-font" id="nav">
             <li>
                        <a class="nav-link collapsePagesSideMenu" data-toggle="collapse" href="#sideNavPages2">
                            Brand Principles <i class="fas fa-chevron-down"></i>
                        </a>
                        <div id="sideNavPages2" class="collapse sideNavPages">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Mission</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Vision</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Values</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Purpose</a>
                                </li>
								<li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Position</a>
                                </li>
                            </ul>
                        </div>
                    </li>
            <li>
                        <a class="nav-link collapsePagesSideMenu" data-toggle="collapse" href="#sideNavPages3">
                            Voice <i class="fas fa-chevron-down"></i>
                        </a>
                        <div id="sideNavPages3" class="collapse sideNavPages">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Voice</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Personality</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">APA</a>
                                </li>
                            </ul>
                        </div>
           <li>
                        <a class="nav-link collapsePagesSideMenu" data-toggle="collapse" href="#sideNavPages4">
                            Our Visuals <i class="fas fa-chevron-down"></i>
                        </a>
                        <div id="sideNavPages4" class="collapse sideNavPages">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Logo</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Colors</a>
                                </li>
                                <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Typography</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Imagery</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Icons</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Data Visualization</a>
                                </li>
								 <li class="nav-item">
                                    <a style="border-bottom: 0px !important;" class="pt-trigger" href="">Elements</a>
                                </li>
                            </ul>
                        </div>
                    </li>
           
        </ul>
        <!-- /Main menu -->

    </div>

</header>
<!-- Header End -->




<!-- JavaScript -->
<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/bundle.min.js"></script>
	<script src="https://www.premierinc.com/external-assets/NAV-DELETE/js/script.js"></script>
<!-- Plugin Js -->


</body>
</html>
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Feb 04, 2021 Feb 04, 2021
In Response To kineticcreative123

Locate the code below in your 'external-assets/NAV-DELETE/js/script.js' file

 

 

 

 

jQuery(function ($) {


    "use strict";

    /* ===================================
        Side Menu
    ====================================== */

   $("#sidemenu_toggle").on("click", function () {
        $(".site-nav").toggleClass("active");
    }),
    
    $(".site-nav li a").on("click", function () {
        $(".site-nav").removeClass("active");
    });


    /* ===================================
         Counter
    ====================================== */

 

 

 

Remove:

 

$(".site-nav li a").on("click", function () {
$(".site-nav").removeClass("active");
});

 

Then instead of the , after the code below add a ; as shown:

 

$("#sidemenu_toggle").on("click", function () {
$(".site-nav").toggleClass("active");
});

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
wesw17337953
Community Beginner ,
Feb 12, 2021 Feb 12, 2021
LATEST
In Response To osgood_

Perfect! Thank you. It's wprking now. Thanks again!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices