• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Need help with secondary NAV expand

Contributor ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

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

Views

310

Translate

Translate

Report

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

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
...

Votes

Translate

Translate
Community Expert ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

You are missing an ending tag as in

 

BenPleysier_0-1612398304801.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

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
Community Expert ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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
LEGEND ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

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.

 

 

Votes

Translate

Translate

Report

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
Contributor ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

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
LEGEND ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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
Community Beginner ,
Feb 12, 2021 Feb 12, 2021

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

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