Home Forums Porto Template Nav Bar issue on mobile

  • This topic has 2 replies, 2 voices, and was last updated 1 week, 4 days ago by CL. This post has been viewed 73 times
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10031771
    CL
    Participant

    Hi there !

    I bought your amazing theme and I am using the Architecture & Interior Design demo to base my website on. I just changed the nav bar because I needed the items as « home », « our services », etc. to be always displayed on screen.

    Everything is ok as you can see online (I gave you the private url above) except that the nav bar is a mess in the mobile version. For smartphone version, I would like just the logo and a click-button to show the menu…

    I don’t know what I need to change… Could you help me?

    Thanks a lot in advance !



    Template Version: Architecture and design demo
    #10031774
    Support
    Keymaster

    Hello,

    Thanks for your purchase.

    1) Remove the “side-header-overlay-full-screen” class from the HTML tag:

    FROM:

    <html class="side-header-overlay-full-screen">

    TO:

    <html>

    2) Remove the current sticky-wrapper that you have there and the current HEADER tag and use this instead:

    <header id="header" class="header-transparent header-transparent header-transparent-dark header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    	<div class="header-body border-top-0 bg-dark box-shadow-none">
    		<div class="header-container container container-xl">
    			<div class="header-row">
    				<div class="header-column">
    					<div class="header-row">
    						<div class="header-logo">
    							<a href="index.html">
    								<img alt="Porto" width="82" height="40" src="img/logo-default-slim-dark.png">
    							</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">
    							<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="nav-link active" href="demo-digital-agency.html">
    												Home
    											</a>
    										</li>
    										<li>
    											<a class="nav-link" href="demo-digital-agency-about.html">
    												About
    											</a>
    										</li>
    										<li>
    											<a class="nav-link" href="demo-digital-agency-services.html">
    												Services
    											</a>
    										</li>
    										<li>
    											<a class="nav-link" href="demo-digital-agency-work.html">
    												Work
    											</a>
    										</li>
    										<li>
    											<a class="nav-link" href="demo-digital-agency-contact.html">
    												Contact
    											</a>
    										</li>
    									</ul>
    								</nav>
    							</div>
    							<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
    								<i class="fas fa-bars"></i>
    							</button>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </header>

    This is the expected result (tested with the default Architecture & Interior Design demo):

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    • This reply was modified 1 week, 4 days ago by Support.
    #10031777
    CL
    Participant

    It works perfectly it’s amazing !! Thank you so much !!!
    And happy new year to you and your team by the way !


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