Home Forums Porto Template please not hidden the navbar.

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 3 months, 3 weeks ago. This post has been viewed 164 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10029779

    Lenze90
    Participant

    Navigation is hidden in the mobile view.
    Unfortunately I can’t find the right place in the css code to hide the navigation.
    I would like to display one or two navigation points in lower resolutions. But the navigation disappears very quickly.

    my html code

    				<header id="header" class="header-transparent header-effect-shrink header-no-border-bottom" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}" style="height: 100px;">
    						<div class="header-body border-top-0 bg-dark box-shadow-none" style="position: fixed; top: 0px;">
    							<div class="header-container container" style="height: 100px; min-height: 0px;">
    								<div class="header-row">
    									<div class="header-column">
    										<div class="header-row">
    											<div class="header-logo" style="width: 82px; height: 40px;">
    												<a href="index.html">
    													<img alt="Porto" width="82" height="40" src="img/logo-default-slim-dark.png" style="top: 0px; width: 82px; height: 40px;">
    												</a>
    											</div>
    										</div>
    									</div>
    									<div class="header-column justify-content-end">
    										<div class="header-row">
    											<div class="header-nav header-nav-links header-nav-dropdowns-dark header-nav-light-text order-2 order-lg-1 header-section1">
    												<div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
    													<nav class="collapse">
    														<ul class="nav nav-pills" id="mainNav">
    															<li>
    																<a class="dropdown-item dropdown-item-section1" data-hash="" data-hash-offset="68" href="#services">Über Uns</a>
    															</li>
    															<li>
    																<a class="dropdown-item dropdown-item-section1" data-hash="" data-hash-offset="68" href="#projects">Kontakt</a>
    															</li>
    															<li>
    																<a class="dropdown-item" data-hash="" data-hash-offset="68" href="#clients"><span class="ws-nowrap"><i class="fas fa-phone"></i> (02266) 479 9598</span></a>
    															</li>
    															<li>
    																<a class="dropdown-item" data-hash="" data-hash-offset="68" href="#team">EINLOGGEN</a>
    															</li>
    														</ul>
    													</nav>
    												</div>
    											</div>
    											<div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2">
    												<div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
    
    													<a href="#" class="header-nav-features-toggle">
    														<a href="/heyKitchen/HTML/page-login-fitter.html"><button type="button" class="btn btn-modern btn-secondary btn-secondary-dealer rounded-0 ml-2 mr-2">Angebot einholen</button></a>
    														<a href="/heyKitchen/HTML/page-login.html"><button type="button" class="btn btn-modern btn-secondary btn-secondary-fitter rounded-0 ml-2 mr-2">Aufträge suchen</button></a>
    												</div>
    											</div>
    										</div>
    									</div>
    								</div>
    							</div>
    						</div>
    					</header>

    • This topic was modified 3 months, 3 weeks ago by  Lenze90.
    #10029782

    Support2
    Keymaster

    Hello, thanks for your purchase.

    It’s missing the HTML of mobile button that expands the menu on mobile. Try using this HTML code for the header:
    https://pastebin.com/raw/wS1cig2p

    * We just add the <button class="btn header-btn-collapse-nav ml-0 ml-sm-3" .....

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

    Kind Regards,

    Rodrigo.


    #10029785

    Lenze90
    Participant

    Thank you very much for your quick feedback. But I think you misunderstood me.
    I removed the button for the mobile menu. I don’t want this kind of menu in the mobile version.

    I want to have only 2 of my normal menu which has 4 navigation points displayed in the mobile view.


    • This reply was modified 3 months, 3 weeks ago by  Lenze90.
    #10029793

    Support2
    Keymaster

    Hello,

    Unfortunately using the default header it’s not possible, since the template has CSS code that forces to hamburguer menu on mobile.
    My suggestion for you is create a custom HTML code like on this link:
    https://pastebin.com/raw/LShaurMK

    Note that we just add this code below above the header-nav:

    <div class="d-lg-none">
    	<ul class="nav nav-pills" id="mainNav">
    		<li>
    			<a class="dropdown-item dropdown-item-section1 text-color-light font-weight-bold" data-hash="" data-hash-offset="68" href="#services">Über Uns</a>
    		</li>
    		<li>
    			<a class="dropdown-item dropdown-item-section1 text-color-light font-weight-bold" data-hash="" data-hash-offset="68" href="#projects">Kontakt</a>
    		</li>
    		<li class="d-none d-md-block">
    			<a class="dropdown-item dropdown-item-section1 text-color-light font-weight-bold" data-hash="" data-hash-offset="68" href="#services">Über Uns</a>
    		</li>
    		<li class="d-none d-md-block">
    			<a class="dropdown-item dropdown-item-section1 text-color-light font-weight-bold" data-hash="" data-hash-offset="68" href="#projects">Kontakt</a>
    		</li>
    	</ul>
    </div>

    And then we use display classes from bootstrap to show only on mobile.

    Learn more about responsive display classes here: https://getbootstrap.com/docs/4.3/utilities/display/

    Hope this helps.

    Let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


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