Home Forums Porto Admin Template Dropdown menu

This topic contains 4 replies, has 3 voices, and was last updated by  Support 5 months ago. This post has been viewed 348 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10020593

    sociality
    Participant

    Hello,

    How can I make a dropdown menu?

    Specifically, which is the js file running the drop down and which are the classes I should assign to the menu?

    Thank you in advance.


    #10020604

    Support2
    Keymaster

    Hello, thanks for your purchase.

    You are using the Porto HTML (not Porto Admin), right ?
    Below is the HTML that you need to make a dropdown menu:

    <header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 57, 'stickySetTop': '-57px', 'stickyChangeLogo': true}">
    	<div class="header-body">
    		<div class="header-container container">
    			<div class="header-row">
    				<div class="header-column">
    					<div class="header-row">
    						<div class="header-nav">
    							<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main">
    								<i class="fa fa-bars"></i>
    							</button>
    							<div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
    								<nav>
    									<ul class="nav nav-pills" id="mainNav">
    										<li>
    											<a href="index.html">
    												Item 1
    											</a>
    										</li>
    										<li class="dropdown">
    											<a class="dropdown-toggle" href="#">
    												Item 2
    											</a>
    											<ul class="dropdown-menu">
    												<li>
    													<a href="about-me.html">
    														Sub Item 1
    													</a>
    												</li>
    												<li>
    													<a href="page-faq.html">
    														Sub Item 2
    													</a>
    												</li>
    											</ul>
    										</li>
    										<li>
    											<a href="#">
    												Item 3
    											</a>
    										</li>
    										<li>
    											<a href="#">
    												Item 4
    											</a>
    										</li>
    									</ul>
    								</nav>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </header>

    CSS classes used for the dropdown effect:
    dropdown
    dropdown-toggle
    dropdown-menu
    header-nav-main-effect-1 (makes the animation effect for the first level of menu)
    header-nav-main-sub-effect-1 (makes the animation effect fot the second level of menu)

    JS files used:
    js/theme.js line 2587 (makes the menu functionality on mobile resolutions).

    If you need further assistance, please contact us.

    Kind Regards,

    Rodrigo.


    #10020624

    sociality
    Participant

    Alright! Thanx.


    #10020626

    sociality
    Participant

    Please,

    Could you describe the same for the mobile. I believe the theme.js should be dependent to jquery in order to work.

    Thank you.


    #10020632

    Support
    Keymaster

    Hello, sure, Porto depends on jquery, bootstrap, etc… theme.js is the file that creates the navigation specifically.

    It works the same way for mobile.

    Kind Regards.


    • This reply was modified 5 months ago by  Support.
Viewing 5 posts - 1 through 5 (of 5 total)