Home Forums Porto Template Top Nav-bar

This topic contains 4 replies, has 2 voices, and was last updated by  Jorge Costa 6 days ago. This post has been viewed 69 times

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

    Jorge Costa
    Participant

    I’m trying to add a top nav-bar that disappears when we scroll down as the one in index-corporate-hosting.html

    Thing is that i’m breaking my head trying to get it transparent and over the background slider, more or less like in this page: http://www.navkom.si

    Also, if possible, reduce the height.

    Additionaly how can i make the menu items change colour with mouse hover? (instead of background) like in: demo-photography.html

    Code for the top bar:

    <div class="header-top header-top-quaternary header-top-style-3">
    	<div class="container">
    		<nav class="header-nav-top pull-right">
    			<ul class="nav nav-pills">
    				<li>
    					<a href="#" class="dropdown-menu-toggle" id="dropdownLanguage" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    						<img src="img/blank.gif" class="flag flag-gb" alt="English" /> English
    						<i class="fa fa-angle-down"></i>
    					</a>
    					<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownLanguage">
    						<li><a href="#"><img src="img/blank.gif" class="flag flag-es" alt="Español" /> Español</a></li>
    						<li><a href="#"><img src="img/blank.gif" class="flag flag-fr" alt="Française" /> Française</a></li>
    						<li><a href="#"><img src="img/blank.gif" class="flag flag-pt" alt="Português" /> Português</a></li>
    					</ul>
    				</li>
    				<li class="hidden-xs">
    					<a href="page-login.html"><i class="fa fa-angle-right"></i> Login</a>
    				</li>
    				<li class="hidden-xs">
    					<a href="page-login.html"><i class="fa fa-angle-right"></i> Sign Up</a>
    				</li>
    			</ul>
    		</nav>
    	</div>
    </div>

    Thanks


    #10022381

    Support2
    Keymaster

    Hello,

    Using as base the index-corporate-hosting.html, follow the steps below:

    1) To turn transparent add the class header-transparent. To reduce the height of header top remove the class header-top-style-3 and add p-none.

    <header id="header" class="header-transparent header-narrow" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 57, 'stickySetTop': '-57px', 'stickyChangeLogo': false}">
    	<div class="header-body">
    		<div class="header-top header-top-quaternary p-none">
    			<div class="container">
    				<nav class="header-nav-top pull-right">
    					<ul class="nav nav-pills">

    2) Add in (css/custom.css):

    #header.header-transparent .header-top {
    	background: transparent !important;
    }
    
    html.sticky-header-enabled #header.header-transparent .header-body {
    	position: absolute;
    }
    
    html.sticky-header-active #header.header-transparent .header-body {
    	position: fixed;
    }

    3) To change the color of texts on menu add in (css/custom.css):

    /* Sub menu items */
    #header .header-nav-main nav > ul li:hover > a {
        color: blue !important;
    }
    
    /* Top menu items */
    #header .header-nav-main nav > ul > li:hover > a {
        color: red !important;
    }

    Kind Regards,

    Rodrigo.


    #10022383

    Jorge Costa
    Participant

    Thanks Rodrigo, is going good,
    I’ve worked around a few things, because my base is actually index-corporate-7.html
    There are 2 things i still have problems with:

    The top nav-bar should disappear when i scroll down, pretty much like this forum page.

    The top nav-bar menu items (language drop-down, login and sign-up) should also behave like the texts on menu, changing colours on mouse hover.


    #10022386

    Support2
    Keymaster

    Hello,

    Using as base the index-corporate-7.html:

    1) Change the <header> to:

    <header id="header" class="header-narrow header-transparent header-flex" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 45, 'stickySetTop': '-45px'}">

    * Note the 'stickyStartAt': 45, 'stickySetTop': '-45px', that is the options where you define the start point of sticky and the position of menu sticked.

    2) Add in (css/custom.css):

    html.sticky-header-active #header .header-nav {
    	padding-top: 0 !important;
    }

    3) To change the color of header top items on hover, add in (css/custom.css):

    #header .header-nav-top .nav > li:hover > a, #header .header-nav-top .nav > li:hover > span {
    	color: red;
    }

    Kind Regards,

    Rodrigo.


    #10022389

    Jorge Costa
    Participant

    Worked like a charm.
    Cheers!


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