Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Archives

Home Forums Search Search Results for 'semi transparent header background color'

Search Results for 'semi transparent header background color'

Home Forums Search Search Results for 'semi transparent header background color'

Viewing 15 results - 1 through 15 (of 15 total)
  • Author
    Search Results
  • #2008417
    Ying
    Staff
    Customer Support

    When site header and primary navigation have the same background color, it will trigger the theme to add a semi transparent color to the primary navigation.

    Can you go to customizer > colors try set the background color for headerto any other color instead of var(--white)?

    Let me know πŸ™‚

    #1832723
    alberto-salas

    Hi!
    My website has the element “Home Page Hero – Merged”. I am using the starter site from the Site Library called Merch.
    With Simple CSS I am making this header semi transparent:

    .site-header {
    background-color: rgba(255,255,255,0.5) !important;

    So, when I try to use the plugin “Lightweight Social Icons by Tom setting”, I place the widget in the header, but then the background of the social icons don’t match the semi-transparent background of the site header.
    All I need is to have the background of the social media icons transparent or set the background to rgba(255,255,255,0.5) so it matches.

    How can I do this?

    David
    Staff
    Customer Support

    Hi there,

    you can either use the Mobile Header option in Customizer > Layout > Header

    OR

    Use some CSS to remove the semi-opaque background:

    .mobile-menu-control-wrapper .menu-toggle,
    .mobile-menu-control-wrapper .menu-toggle:hover,
    .mobile-menu-control-wrapper .menu-toggle:focus,
    .has-inline-mobile-toggle #site-navigation.toggled {
        background-color: transparent;
    }
    #1668425
    Ying
    Staff
    Customer Support

    Thanks for reminding, oh yes, you can set background image in Customizer > Background Images > Header.

    Make sure the Backgrounds module has been activated at Appearance > Generatepress > modules.

    For semi-transparent color you can set it at customizer > colors > Header.

    For sticky navigation try this CSS:

    body .header-wrap {
        position: sticky;
        top: 0;
    }
    #1635331
    [Support request]

    Topic: Dispatch-Demo Custom Grid Background

    in forum Support
    Raul

    Hi,

    I want to set a semi-transparent-background behind the header of my main grid. It works if I write my code in this CSS-line:

    .wpsp-card .wpsp-content-wrap

    But it affects also the other images on front page which use “contains wpsp-card”. So I added new CSS and it seems to work:

    .wpsp-grid .wpsp-content-wrap{   
        background-color: rgba(0, 0, 0, 0.35)!important;
        background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0.3)))!important;	
    	background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.5) 100%)!important;
    }

    It works but is this correct?

    Dominique

    All fixed for all browsers with full backward compatibility.

    
    /* CSS for header layout - PHP needed in snippets */
    
    .nav-float-right .primary-navigation-wrapper {
        text-align: right;
    }
    
    @media (max-width: 768px) {
    	.primary-navigation-wrapper {
    		flex-basis: 100%;
    	}   
    }
    
    .has-inline-mobile-toggle .inside-header {
    	-webkit-justify-content: space-evenly;
    	justify-content: space-around;
    }
    
    .mobile-menu-control-wrapper {
    	margin-left:unset;
    }	
    
    /* END CSS for header layout - PHP needed in snippets */

    Sticky header and semi-transparent background:

    
    
    /* Sticky site header 60% opacity on scroll */
    
    .site-header {
    	background-color: rgba(0, 0, 0, 0.6);
    	position: sticky;
    	position: -webkit-sticky;
    	position: -ms-sticky;
      z-index: 999;
      top: 0px;
    }
    
    /* END sticky site header 60% opacity on scroll */

    Not bad for a newbie at CSS πŸ™‚

    Now if I can get anchor links headings not to be hidden behind site header on Safari & IOS…

    Dominique

    Hi,

    I noticed it only on X-Box One doesn’t mean that it’s not happening on older browsers or other devices. I don’t have all devices to do tests.

    The layout on 1920px wide screen is the same as tablet with smaller logo, hamburger icon, opening hours, phone number and two buttons on a single line all bunched together to the left. The opening hours, phone number and two buttons are not on top of the full menu with the full-size logo.

    The original site had no issues with the display of the top bar including the semi-transparent menu on sticky scroll.

    I did my best for the CSS as far as adding -webkit & -ms to existing sticky & background-color. Did the same for space-evenly.

    I was inspired by the following code that I found in GeneratePress support to separate four footer widgets on two lines in tablet & mobile. It works perfectly on the Xbox-One Edge browser. Same concept using flex box that is used in the header. I’m just not very good at flex CSS I am surely missing something.

    
    /* Mobile & tablet footer two columns */
    
    @media (max-width:1024px) {
        .inside-footer-widgets {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .inside-footer-widgets>div {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        }
    }
    
    /* END Mobile & Tablet footer two columns */

    Please advise.

    #1618946
    Dominique

    Hi,

    I got https://docs.generatepress.com/article/header-examples/#example-8 working fine as far as spacing on most devices.

    On X-Box Microsoft Edge it’s all clumped to the left.

    I added some webkit & ms to my CSS to try to fix it and it doesn’t work. Here is the CSS that I have:

    
    /* CSS for header layout - php needed in snippets */
    
    .nav-float-right .primary-navigation-wrapper {
        text-align: right;
    }
    
    @media (max-width: 768px) {
    	.primary-navigation-wrapper {
    		flex-basis: 100%;
    	}   
    	.site-header .header-widget {
    		margin-top: 0px;
    	}
    }
    
    .has-inline-mobile-toggle .inside-header {
    	justify-content: space-evenly;
    	-webkit-justify-content: space-evenly;
    	-ms-justify-content: space-evenly;	
    }
    
    .mobile-menu-control-wrapper {
    	margin-left:unset;
    }	
    
    /* END CSS for header layout - php needed in snippets */

    Figured it would work & it doesn’t.

    I also can’t get the background of header to go semi-transparent when sticky on x-box

    This is the code I have:

    
    /* Sticky site header 60% opacity on scroll */
    
    .site-header {
    	background-color: rgb(0, 0, 0, 0.6);
    	-webkit-background-color: rgb(0, 0, 0, 0.6);
    	-ms-background-color: rgb(0, 0, 0, 0.6);
    	position: sticky;
    	position: -webkit-sticky;
    	position: -ms-sticky;
      z-index: 999;
      top: 0px;
    }
    
    /* END sticky site header 60% opacity on scroll */

    Please advice on solutions.

    Dominique

    Hi,

    I have been researching this and found that it’s possible to get top bar & header sticky with a 50% transparent background on scroll.

    Being that I’m starting to understand CSS I think it can be done without a transition using strictly CSS.

    By using z-index and having a black background that stays there behind fixed and then the header & top bar always having a 50% black background above it.

    
    /* Sticky site header & top bar 50% opacity on scroll */
    
    .top-bar {
    	background-color: black;
    	position: fixed;
    	position: -webkit-fixed;
    	z-index: 998;
    	top:0;
    }
    
    .top-bar {
    	background-color: rgb(0, 0, 0, 0.5);
    	position: sticky;
    	position: -webkit-sticky;
    	z-index: 999;
      top: 0;
    }
    
    .site-header {
    	background-color: black;
    	position: fixed;
    	position: -webkit-fixed;
    	z-index: 998;
    	top:57.13; /* height of top bar */
    }
    
    .site-header {
    	background-color: rgb(0, 0, 0, 0.5);
    	position: sticky;
    	position: -webkit-sticky;
      z-index: 999;
      top: 57.13px; /* height of top bar */
    }
    

    I’m 80% there. The menu background color in header stays black in mobile.

    I can’t figure out how to implement a 3 second ease in transition.

    Any insights or help would be appreciated.

    #1168967

    In reply to: hero page with logo

    David
    Staff
    Customer Support

    Hi there,

    you can use the Background Color as an overlay:
    https://docs.generatepress.com/article/header-element-overview/#background-overlay

    Make sure you have a semi transparent background color when enabling this option.

    #1142310
    [Resolved]

    Topic: Color overlay header background image

    in forum Support
    Radek

    Hi, is there an CSS (or some) way to make semitransparent color overlay for header background image (set by customizer), that will have no effect to web logo ? For better understandig: only customizer is used (not Elements) and layers from bottom must be: header background image / semitransparent color overlay / web logo (image or website name+description).

    Mark

    Hi Leo,

    Sorry for the delay. Actually what I am trying to is place a dark background JUST behind text on regular pages, not in a header.

    Most overlays seem to place a semi-transparent color over the entire background image, not just behind the text.

    Mark

    Tom
    Lead Developer
    Lead Developer

    There isn’t a way to set a background image to the body on a per-page basis without CSS, unfortunately.

    What I would do is:

    1. Set a global background image in Customize > Background Images.
    2. Set your header/navigation to transparent/semi transparent using the color options in Customize > Colors.

    Then use CSS to change the background image depending on the page we’re viewing.

    For example, if we’re working on a page with the ID of 10, we would do this:

    body.page-id-10 {
        background-image: url( 'URL TO IMAGE HERE' );
    }

    Then if we need to apply one to ID 20, we would do this:

    body.page-id-20 {
        background-image: url( 'URL TO IMAGE HERE' );
    }

    This way, the background image applies to the entire site, not just the hero element.

    Let me know if that makes more sense or not – it should simplify things a lot πŸ™‚

    #660018
    [Support request]

    Topic: How to set header background image?

    in forum Support
    Tim

    Seems like an easy thing, but after a lot of searching, I’m stumped on how/where I set an image on one Page that displays behind the semi-transparent header background color. It looks neat, and I want to do the same on other pages… but can’t figure out how.

    I’ve got GP Premium + Elementor Pro. In Customize -> Background header…no images! Featured image for the page with the background isn’t set.

    #464174
    Leo
    Staff
    Customer Support

    Hi there,

    This request has only been brought up a handful of times.

    We will definitely consider it when Sections gets a make over in order for it to be compatible with Gutenberg.

    For now the easiest way is to use a photo editing software to add on the overlay color before you upload as a background image πŸ™‚

    Or you can try something like this: https://generatepress.com/forums/topic/semi-transparent-image-overlay-for-sections-and-page-header/#post-158850

Viewing 15 results - 1 through 15 (of 15 total)