Collapse two in header

Home Forums Porto – Responsive HTML5 Template Collapse two in header

  • This topic has 2 replies, 2 voices, and was last updated 1 year ago by zerojano. This post has been viewed 573 times
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10043235
    zerojano
    Participant

    Good day support,

    We are modifying a template example, in the Header we have 2 navs and we should have that information collapsed into a single button, we bought code:

    			<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyScrollUp': false, 'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': false, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    				<div class="header-body">
    					<div class="header-top header-top-default border-bottom-0 bg-color-primary">
    						<div class="container">
    							<div class="header-row py-2">
    								<div class="header-column justify-content-end">
    									<div class="header-row pt-8">
    										<div class="header-nav">
    											<div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">
    												<nav class="collapse">
    													<ul class="nav nav-pills" id="mainNav">
    														<li class="dropdown">
    															<a class="dropdown-item dropdown-toggle" href="#">Menu 1</a>
    															<ul class="dropdown-menu">
    																<li><a href="#" class="dropdown-item">test 1</a></li>
    																<li><a href="#" class="dropdown-item">test 2</a></li>
    															</ul>
    														</li>
    														<li class="dropdown"><a class="dropdown-item" href="#">Menu 2</a></li>
    													</ul>
    												</nav>
    											</div>
    										</div>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="header-container container">
    						<div class="header-row">
    							<div class="header-column">
    								<div class="header-row">
    
    									<div class="header-logo header-logo-sticky-change" style="width: 160px; height: 30px;">
    										<a href="/">
    											<img class="header-logo-non-sticky opacity-0" alt="UACh logo" width="215" height="108" src="img/logo-uach-small.png">
    											<img class="header-logo-sticky opacity-0" alt="UACh logo" width="120" height="50" style="top: -10px;" src="img/logo-default-slim1.png">
    										</a>
    									</div>
    								</div>
    							</div>
    							<div class="header-column justify-content-end">
    								<div class="header-row pt-8">
    									<div class="header-nav">
    										<div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">
    											<nav class="collapse">
    												<ul class="nav nav-pills" id="mainNav">
    													
    													<li class="dropdown">
    														<a class="dropdown-item dropdown-toggle" href="#">Menu 3</a>
    														<ul class="dropdown-menu">
    															<li><a href="#" class="dropdown-item">Submenu 1</a></li>
    															<li><a href="#" class="dropdown-item">Submenu 2</a></li>
    														</ul>
    													</li>
    													<li class="dropdown"><a class="dropdown-item" href="#">Menu 4</a></li>
    													<li class="dropdown"><a class="dropdown-item" href="#">Menu 5</a></li>
    													<li class="dropdown">
    														<a class="dropdown-item dropdown-toggle" href="#">Menu 6</a>
    														<ul class="dropdown-menu">
    															<li><a href="#" class="dropdown-item">Submenu 3</a></li>
    															<li><a href="#" class="dropdown-item">Submenu 4</a></li>
    														</ul>
    													</li>
    												</ul>
    											</nav>
    										</div>
    										<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
    											<i class="fas fa-bars"></i>
    										</button>
    									</div>
    								</div>
    
    							</div>
    						</div>
    					</div>
    				</div>
    			</header>

    I attached an image of what it currently looks like:

    https://bit.ly/3oyVQ7u

    from mobile:
    https://bit.ly/43pYGut

    greetings


    • This topic was modified 1 year ago by zerojano.
    • This topic was modified 1 year ago by zerojano.
    #10043243
    Support
    Keymaster

    Hello,

    Unfortunately we don’t have an example of that on Porto, we just have this one:
    https://www.okler.net/previews/porto/9.9.2/feature-navigations-logo-between.html

    What you can do is to add the elements in the nav and add bootstrap helper classes, for example:

    <li class="dropdown d-block d-lg-none">
    	<a class="dropdown-item" href="#" title="">
    		This will appear on mobile only.
    	</a>
    </li>

    https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements

    Hope that helps.


    #10043260
    zerojano
    Participant

    Very good!


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

This topic is marked as "RESOLVED" and can not rceive new replies.