Home Forums Porto Template About centered logo and pageheader height (with background overlay)

This topic contains 2 replies, has 2 voices, and was last updated by  ceruleo 2 months, 1 week ago. This post has been viewed 136 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10029339

    ceruleo
    Participant

    Hello!

    First issue. I would need to see the logo (shorter) when I scroll down. Is it possible?

    Second issue. Also, I applied a code to custom.css in order to see the logo right in mobile (prior to apply the code, I saw it so big and I could not see the phone). Now, I see the phone, but the logo looks very small. Is it possible to see it a little larger on mobiles? The code I added is as follows:
    —————
    @media(max-width: 767px) {
    .header-logo,
    .header-logo img {
    width: 100px !important;
    height: auto !important;
    }
    }
    ——————-
    Last thing: I will use the background overlay for page header as you can see in url 2). Is there any way to reduce the height of that page header? I could not find the way.

    Thanks in advance.

    Kind regards,
    Sofía



    Template Version: The last
    #10029342

    Support2
    Keymaster

    Hello,

    1) You will need change the HTML structure of your header to get the logo on the view and small when scroll down. With your current header this is not possible. Try to use some of those headers type:
    http://preview.oklerthemes.com/porto/7.3.0/feature-headers-center-double-navs.html
    http://preview.oklerthemes.com/porto/7.3.0/feature-headers-center-nav-buttons.html

    2) You can try increasing the value for the width:

    @media(max-width: 991px) {
    	.header-logo,
    	.header-logo img {
    		width: 190px !important;
    		height: auto !important;
    	}
    
    	/* Use this CSS for pull down the logo when scroll down (only on mobile devices) */
    	html.sticky-header-active .header-logo img {
    		top: 70px !important;
    	}
    }

    * Note the extra CSS code for pull down the menu on mobile.
    * Note that I changed the media querie value. With this new value also will show correctly on tablets.

    3) To reduce the height of page header you can use the helper classes for padding. For example:

    <section class="page-header page-header-modern page-header-background overlay overlay-color-primary overlay-show overlay-op-6 py-5" style="background-image: url(imagen/fondo.jpg);">
         <div class="container pt-5 pb-3">
              .....
              ........

    * Note the py-5 on the section.
    * Note the pt-5 pb-3 on the container.

    Learn more about helpers spacement classes here:
    https://getbootstrap.com/docs/4.3/utilities/spacing/

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

    Kind Regards,

    Rodrigo.


    #10029351

    ceruleo
    Participant

    Thank you so much, Rodrigo!
    Regarding the logo on mobile, it worked!!

    Kind regards,
    Sofía


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