Home Forums EZY – Responsive Multi-Purpose HTML5 Template Vertical menu with header-nav-stripe

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10032034
    hobbit-elanor
    Participant

    Dear developers,

    I am using a vertical side menu and would like to add the header-nav-stripe effect to it (featured here https://preview.oklerthemes.com/ezy/1.1.0/index-navigation-stripe.html). The edited code looks like this:

    <strong><div class="body">
    <header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 1, 'stickySetTop': '0px'}">
    <div class="header-body">
    <div class="header-container container">
    <div class="header-row">
    <div class="header-column justify-content-lg-center">
    <div class="header-logo"><a href="index.html"><img width="145" height="17" src="img/logo.png" /></a></div></div>
    <div class="header-column justify-content-left flex-lg-wrap">
    
    <hr class="my-5 w-100 d-none d-lg-block">
    
    <div class="header-column justify-content-end">
    <div class="header-nav header-nav-stripe">
    <div class="header-nav-main sidenav">
    <nav class="collapse">
    <ul class="nav nav-pills flex-row" id="mainNav">
    <li><a href="link1.html">LINK 1</a></li>
    <li><a href="link2.html">LINK 2</a></li>
    <li><a href="link3.html">LINK 3</a></li>
    <li><a href="link4.html">LINK 4</a></li>
    <li><a href="link5.html">LINK 5</a></li>
    <li><a href="link6.html">LINK 6</a></li>
    <li><a href="link7.html">LINK 7</a></li>
    <li><a href="link8.html">LINK 8</a></li>
    <li><a href="link9.html">LINK 9</a></li>
    <li><a href="link10.html">LINK 10</a></li>
    </ul>
    </nav>
    </div>
    </div>
    </div>
    
    <hr class="my-5 w-100 d-none d-lg-block">
    </div>
    <br>					
    <div class="header-column justify-content-end justify-content-lg-center flex-lg-wrap">
    <div class="header-button d-none d-sm-flex order-1">
    <a href="submit.html">
    <span class="wrap"><span>SUBMIT</span><strong><i class="lnr lnr-arrow-right"></i></strong></span></a>
    </div>
    <button class="header-btn-collapse-nav order-3 ml-3" data-toggle="collapse" data-target=".header-nav-main nav">
    <span class="hamburguer">
    <span></span>
    <span></span>
    <span></span>
    </span>
    <span class="close">
    <span></span>
    <span></span>
    </span>
    </button>
    </div>
    </div>
    </div>
    </div>
    </header></strong>

    This does add the striped effect to the menu, but I encounter a number of issues:

    1. The menu shifts down (is lowered).

    2. If the window gets resized in any direction, the last three links disappear from view + there emerges a semi-transparent disabled scrollbar in the menu section.

    3. I am using the black-and-blue intro section featured here: https://preview.oklerthemes.com/ezy/1.1.0/multi-purpose-5.html. It doesn’t work properly with the above menu code – it fails to modify the fonts and x-y positions during window resizing.

    Any suggestions?
    Thank you in advance.

    Lisa.


    • This topic was modified 1 week, 4 days ago by Support2.
    • This topic was modified 1 week, 4 days ago by Support2.
    #10032039
    Support2
    Keymaster

    Hello Lisa,

    1, 2) Here’s the code you need for get it properly working:
    https://pastebin.com/raw/PbSf3881

    3) You mean the intro section with Revolution Slider ? If yes, we couldn’t reproduce this issue here. When we add the multi-purpose-5 slider in a page with Side Header (vertical menu), the slider works properly during window resize. Please send a online link with your website for us, so we can inspect your code and help you with this.

    Kind Regards,

    Rodrigo.


    #10032042
    hobbit-elanor
    Participant

    Hello Rodrigo,

    I really appreciate your prompt reply, this solved all three issues.

    I was wondering if there’s any way to make all 10 links visible, so that there’s no scrollbar? Is it the issue of space? Or is it just the way nano-content works?

    Thanks again.
    Lisa.


    #10032043
    hobbit-elanor
    Participant

    Also, can I ask if I can somehow change the color of the stripe?


    #10032045
    Support2
    Keymaster

    Hello Lisa,

    Please try with the custom CSS code below in (css/custom.css):

    @media (min-width: 992px) {
    	/* Increaase height of nav menu to show more items */
    	html.side-header #header .header-nav {
    		height: 40vh;
    	}
    
    	/* Change stripe color */
    	html #header .header-nav.header-nav-stripe .header-nav-main nav > ul > li > a.active,
    	html #header .header-nav.header-nav-stripe .header-nav-main nav > ul > li:hover > a, 
    	html #header .header-nav.header-nav-stripe .header-nav-main nav > ul > li:focus > a {
    		background-color: red;
    	}
    }

    * See the comments.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10032046
    hobbit-elanor
    Participant

    This worked perfectly, thank you for your prompt and productive assistance!


Viewing 6 posts - 1 through 6 (of 6 total)