Transparant main header

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Support Team 1 year, 2 months ago.

  • Author
    Posts
  • #8432

    Karim Bizih
    Participant
    Post count: 11

    Hello again,

    Is it possible to make main header semi transparent, so you see the banner behind it, up until the top header?

    Same as this website: http://www.valentinobarbers.nl/

  • #8433

    Support Team
    Keymaster
    Post count: 397

    Hi Karim, yep you already did it via custom css

    header.navbar-fixed-top {
    opacity: 0.8;
    }

    Also you need to set top margin for layer slider -80px or like this. You’ll see the layer slider settings.

    Then it will be like this:

    http://imagizer.imageshack.com/img923/2526/7fLTmz.jpg

    • #8434

      Karim Bizih
      Participant
      Post count: 11

      Yeah , that looks nice.

      3 questions:

      *Can i make the top header solid colour and banner stop below top header? Now also my top header is transparant. I want top header normal solid color black and below it transparant like you gave.

      *Can i target only the homepage for this and leave the rest with normal header?

      *Can i turn all this off on smaller devices and make banner start under the mainheader as normally? Now my banner is almost totally hidden on tablet and smartphone.

      • #8436

        Support Team
        Keymaster
        Post count: 397

        added an option to theme options for opacity and if you works for you I can sent it to you files. Please check the header and top header.

        Premium Theme

  • #8435

    Karim Bizih
    Participant
    Post count: 11

    Forget first question, this way it loosk nice too

    forget third question too. This is cause the -80 margin on slider row.
    It only looks bad on mobile portrait view.

    Maybe you have other solution for that?

    So only that and to target only homepage with the transparant header please.

  • #8438

    Karim Bizih
    Participant
    Post count: 11

    Perfect solution again. Amazing support:)

    thanks

  • #8439

    Support Team
    Keymaster
    Post count: 397

    Hey Karim, here is the LastPoint WordPress theme demo slider settings:

    You’ll see the

    /*Mobile Layout: 320px. and /*Tablet Layout: 768px. in style.css you should add to some rule for the slider for mobile view.

    For this; please go to your Theme Options panel and add those two rules in the custom css area:

    /*		Tablet Layout: 768px.
    --------------------------------------------------------------------------------------------------*/
    @media only screen and (min-width: 768px) and (max-width: 991px) {
    
    	.mainheaderwrapper {
    		opacity: 1;
    	}
    	
    	.yoursliderid {
    		margin-top: 0;
    	}
    	
    }
    
    @media only screen and (max-width: 900px) {
    
    	.mainheaderwrapper {
    		opacity: 1;
    	}
    	
    	.yoursliderid {
    		margin-top: 0;
    	}
    	
    }

    I hope that will helps to you.

You must be logged in to reply to this topic.