Home Forums Porto Template Header flat with big sticky logo

This topic contains 9 replies, has 3 voices, and was last updated by  sumaro 1 week, 3 days ago. This post has been viewed 116 times

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10023009

    sumaro
    Participant

    Hi,

    I’d like to use the flat header http://preview.oklerthemes.com/porto/5.7.2/index-header-flat.html but with bigger logo

    https://www.dropbox.com/s/7uaoh4kevlcmg0b/porto-preview1.jpg?dl=0

    So when I scroll the page down logo is smaller

    https://www.dropbox.com/s/okovazq1sopmk0n/porto-preview2.jpg?dl=0

    How to achieve this?

    Thank You.


    #10023015

    Support
    Keymaster

    Hello, thanks for your purchase.

    Here’s how you can use a bigger logo with the flat header:

    <header id="header" class="header-no-min-height header-mobile-nav-only header-flex" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 1, 'stickySetTop': 0, 'stickyChangeLogo': true}">
    	<div class="header-body">
    		<div class="header-container container">
    			<div class="header-row">
    				<div class="header-column">
    					<div class="header-logo">
    						<a href="index.html">
    							<img alt="Porto" width="165" height="165" data-sticky-width="82" data-sticky-height="82" data-sticky-top="0" src="img/logo-big.png">
    						</a>
    					</div>
    				</div>
    				<div class="header-column">
    					<div class="header-row">
    						<div class="header-nav header-nav-stripe">
    							<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main">
    								<i class="fa fa-bars"></i>
    							</button>
    							<ul class="header-social-icons social-icons hidden-xs">
    								<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
    								<li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
    								<li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
    							</ul>
    							<div class="header-nav-main header-nav-main-square header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
    								<nav>
    									<ul class="nav nav-pills" id="mainNav">
    										<li class="dropdown">
    											<a class="dropdown-toggle" href="index.html">
    												Home
    											</a>
    											<ul class="dropdown-menu">
    												<li>
    													<a href="index.html">
    														Landing Page
    													</a>
    												</li>
    											</ul>
    										</li>
    										<li class="">
    											<a href="demos.html">
    												Demos
    											</a>
    										</li>
    										<li class="dropdown">
    											<a class="dropdown-toggle" href="#">
    												Contact Us
    											</a>
    											<ul class="dropdown-menu">
    												<li><a href="contact-us.html">Contact Us - Basic</a></li>
    												<li><a href="contact-us-advanced.php">Contact Us - Advanced</a></li>
    											</ul>
    										</li>
    									</ul>
    								</nav>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </header>

    You can change the logo size if you want to.

    Kind Regards,

    Jonas


    #10023020

    sumaro
    Participant

    Thank You Jonas,

    Your solution makes whole <header> bar higher. Please, take a look at the first image I posted. Header bar should be the same, but logo should be bigger (higher). When scrolling the logo should become smaller – matching to header bar height.

    I can see quite similar effect on this demo:
    http://preview.oklerthemes.com/porto/5.7.2/demo-construction.html


    #10023027

    Support2
    Keymaster

    Hello,

    Using as base the last HTML code we sent for you, please follow the steps below:

    1) First change the html of logo image to:

    <img alt="Porto" width="82" height="82" data-sticky-width="165" data-sticky-height="165" data-sticky-top="0" src="img/logo-big.png">

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

    @media( min-width: 992px) {
    	#header, #header .header-body {
    		min-height: 0 !important;
    		height: 130px !important;
    	}
    }

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 week, 4 days ago by  Support2.
    • This reply was modified 1 week, 4 days ago by  Support2.
    #10023033

    sumaro
    Participant

    Hi Rodrigo,

    Logo should be big at start and smaller after scrolling down, so finally I changed the html of logo image to:

    <img alt="Porto" width="165" height="165" data-sticky-width="78" data-sticky-height="78" data-sticky-top="0" src="img/logo-big.png">

    + I changed the height of #header, #header .header-body to 90px

    The code is here: http://beta345.twsd.pl/index-header-flat.html

    The issue now is that part of the big logo is now hidden.

    Here is what I’d like to achieve:

    Best Regards,

    Rafał


    • This reply was modified 1 week, 4 days ago by  sumaro.
    • This reply was modified 1 week, 4 days ago by  sumaro. Reason: wrong logo code
    #10023038

    Support2
    Keymaster

    Hello Rafal,

    Right, in that case please add this code in (css/custom.css):

    @media (min-width: 992px) {
        html:not(.ie) #header.header-flex .header-logo {
            align-items: flex-start;
            margin-top: -18px;
        }
    }

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

    Kind Regards,

    Rodrigo.


    #10023039

    sumaro
    Participant
    This reply has been marked as private.
    #10023041

    sumaro
    Participant

    Thanks,

    Now it looks fine, but only on Chrome (where browser window is over 992px width) and iPad Safari (landscape mode).

    Whole menu list went down over:
    – Mozilla Firefox
    – Internet Explorer
    – Microsoft Edge

    In mobile mode (less then 992px width) the menu bar is higher then big logo.


    #10023042

    Support2
    Keymaster

    Hello,

    Please, add in (css/custom.css):

    /* logo */
    #header .header-logo {
    	position: absolute;
    }
    
    /* IE fix */
    html.ie #header .header-logo {
    	top: -17px;
    }
    
    
    /* Mobile only */
    @media(max-width: 991px) {
    	#header .header-btn-collapse-nav {
    		margin-bottom: 30px;
    	}
    
    	#header.header-mobile-nav-only .header-nav {
    		margin-top: 0;
    	}
    
    	#header.header-no-min-height .header-body {
    		min-height: 90px !important;
    	}
    
    	#header .header-logo img {
    		margin: -1px 0 0;
    		max-width: 78px;
    		height: auto !important;
    	}
    }

    * Note that in mobile resolutions i had to force to small logo size. If use the big logo on mobile, the logo stays over the menu dropdown. If you want to test with big logo on mobile, just remove the style max-width: 78px.

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

    Kind Regards,

    Rodrigo.


    #10023043

    sumaro
    Participant

    This is now perfect. I appreciate your help a lot.

    Thank you.

    r.


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