Home Forums Porto Template Top Nav-bar

This topic contains 11 replies, has 2 voices, and was last updated by  Jorge Costa 3 months ago. This post has been viewed 314 times

Viewing 12 posts - 1 through 12 (of 12 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!


    #10022663

    Jorge Costa
    Participant

    Using this Ticket to ask some help with an issue:
    http://www.portrisa.com/porto/products.html
    Can’t find a way of removing that grey margin over the parallax at the top.

    Also, how can i keep the menu items lit-up after i click them? (both the main menu, top nav-bar and also the secondary)

    Thanks


    #10022665

    Support2
    Keymaster

    Hello Jorge,

    1) On line 120 of (css/custom.css) change to this:

    /* Page Header - Parallax */
    .page-header.parallax {
    	margin: 0 0 1px;
    	padding: 180px 0 20px;
    	margin-top: -30px;
    }

    * Note that i added negative margin top.

    2) To lit-up the menu items when click, change the code of line 103 in (css/custom.css) with this new:

    /* Top menu items */
    #header .header-nav-main nav > ul > li:hover > a, #header .header-nav-main nav > ul > li > a:focus {
        color: orange !important;
    }

    For top nav is the line 107:

    /* Top nav */
    #header .header-nav-top .nav > li:hover > a, #header .header-nav-top .nav > li:hover > span, #header .header-nav-top .nav > li > a:focus {
    	color: orange;
    }

    For the secondary add this code in (css/custom.css):

    .nav-secondary .nav-pills > li a:focus {
    	color: orange;
    }

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 3 months, 1 week ago by  Support2.
    #10022668

    Jorge Costa
    Participant

    The main menu is still not lit on select.

    Since you are at it, there are some issues on the homepage:
    Is there a way to remove that grey shadow when i hover and select the top nav-bar links?
    Also the slider data is off-centered to the left and not properly responsive, how can i correct it?

    Thanks Rodrigo


    #10022670

    Support2
    Keymaster

    Hello Jorge,

    I understand now, you want to lit-up the active menu of page, right ?

    1) First change the code of line 103 in (css/custom.css) to this:

    /* Top menu items */
    #header .header-nav-main nav > ul > li:hover > a, #header .header-nav-main nav > ul > li > a:focus, #header .header-nav-main nav > ul > li.active > a {
        color: orange !important;
    }

    * This will make the active items with text color orange.

    2) Add the class “active” on each item according the respective page, for example:

    .
    ..
    ...
    <li class="active">
    	<a href="#">
    		Gallery
    	</a>
    </li>
    ...
    ..
    .

    * Note that i added the class “active”. In that example we are on the page “Gallery”.

    3) To remove the grey shadow on top nav links, add this code in (css/custom.css):

    html #header .header-top.header-top-quaternary .header-nav-top ul > li > a:hover, html #header .header-top.header-top-quaternary .header-nav-top ul > li.open > a:hover, html #header .header-top.header-top-quaternary .header-nav-top ul > li > a:focus, html #header .header-top.header-top-quaternary .header-nav-top ul > li.open > a:focus {
    	background: transparent;
    }
    
    html #header .header-top.header-top-quaternary .header-nav-top ul > li.open > a {
    	background: transparent;
    }

    4) Regarding the slider, you need to remove all “data-hoffset” of layers. Remove all attributes marked with red square on image below:

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

    Kind Regards,

    Rodrigo.


    #10022671

    Jorge Costa
    Participant

    Awesome!

    Just one last thing.. for now:
    How to configure the secondary menu behavior to be like index-corporate-hosting in terms of liting-up the items acording to the position of the page? I mean, when scrolling down, the menu items are being selected automatically.


    #10022674

    Support2
    Keymaster

    Hello Jorge :),

    Just change the <body> to:

    <body data-spy="scroll" data-target="#navSecondary" data-offset="170">

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

    Kind Regards,

    Rodrigo.


    #10022678

    Jorge Costa
    Participant

    Outstanding!!
    Thank you very much Sir.

    Jorge


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