Need help with secondary NAV expand

Forum|Forum|4 years ago
February 3, 2021
3 replies
747 views

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>

This topic has been closed for replies.

Correct answer osgood_

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");
});

O

osgood_

Legend

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.

kineticcreative123Author

Inspiring

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>

O