This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Transparent Header toggle to standard

  • Creator
    Topic
  • #24412
    Daniel Hefferan
    Participant

    Hey Jason,

    I am using the transparent header on several pages for a site, and I see that it toggles the transparent header to the standard header at 767px. I would like to do that 992px instead. Been messing with the css, and for some reason it is eluding me. Can you point me in the right direction? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #24413
    Daniel Hefferan
    Participant

    Or… to potentially disable the toggle altogether?

    #24416
    Jason Bobich
    Keymaster

    Hi,

    Don’t think of it as “switching” where the behavior exists. The theme is styling things a certain way at different viewports, as you know. So, at each viewport individually, you want to asses where things are and what you’re going to change whatever element for that viewport.

    You can scale your browser window down to the different viewport sizes you want to target, and then use your inspector. Use this to see what styles are there for that viewport, and then tackle your overriding CSS, one viewport at a time.

    /* Applied everywhere, at all viewports */
    .whatever {
    	...
    }
    .whatever-else {
    	...
    }
    
    /* Tablets and below */
    @media (max-width: 991px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Mobile and below */
    @media (max-width: 767px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Everything ABOVE mobile */
    @media (min-width: 768px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Everything ABOVE Tablet */
    @media (min-width: 992px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    #24417
    Daniel Hefferan
    Participant

    I get all that… I have a ton of viewport related css already. But no matter what I throw in there, it doesn’t affect the transparent header.

    In the framework css, I found this

    /* Suck layout up into header */
    @media (min-width: 768px) {
    	body.tb-suck-up #container {
    		position: relative;
    	}
    	body.tb-suck-up #container > #top {
    		position: absolute;
    		top: 0;
    		right: 0;
    		left: 0;
    		z-index: 500;
    	}
    	body.tb-suck-up #container > #top > .site-header > .wrap {
    		-webkit-transform: translateZ(0);
    		transform: translateZ(0); /* Fix text flicker in Safari, when other CSS3 animations are happenning. z-indexed below */
    	}
    	.site-header.transparent .logo-standard,
    	.site-header.transparent .header-top .tb-social-icons {
    		display: none;
    	}
    	.site-header.transparent .logo-trans,
    	.site-header.transparent .header-top .social-trans {
    		display: block;
    	}
    }

    I copied that over to my child theme css and changed the min-width to 0px – and still it swaps in the standard header for the transparent header.

    #24422
    Jason Bobich
    Keymaster

    One thing to note is that it was specifically designed in the theme for the mobile header to not be transparent because it just doesn’t work in so many scenarios. So, there is javascript in place that removes the class from the header “transparent” and adds the class “transparent-off” when at the mobile viewport (below 768). This isn’t something you can change very easily. — This should all be shown when you inspect and shrink down your browser window, and you can work your CSS around it.

    So, if you’re styling the mobile header when transaprent, you’ll have to style site-header.transparent-off, opposed to site-header.transparent.

    Next, one crucial thing I don’t see you tackling is the actual background color of the header. That would be the most important thing, right?

    So, just putting all that together and removing the irrelevant stuff…

    body.tb-suck-up #container {
    	position: relative;
    }
    body.tb-suck-up #container > #top {
    	position: absolute;
    	top: 0;
    	right: 0;
    	left: 0;
    	z-index: 500;
    }
    .site-header.transparent-off {
    	background-color: transparent; /* Note: This is the big thing you were missing before */
    }
    .site-header.transparent-off .logo-standard,
    .site-header.transparent-off .header-top .tb-social-icons {
    	display: none;
    }
    .site-header.transparent-off .logo-trans,
    .site-header.transparent-off .header-top .social-trans {
    	display: block;
    }

    Master your browser’s inspector. It will benefit you tremendously, and is a crucial skill in making any kind of CSS customizations.

    And more info on how the background-color property works in CSS, if you’re unsure how the transparent value works vs a color hex code:

    http://www.w3schools.com/cssref/pr_background-color.asp

    #24429
    Daniel Hefferan
    Participant

    Hey Jason,

    Thanks for your response. That helped a ton. I had been in my browsers inspector all day (part of the problem), and every-time I was looking for the right class, I was often down a little too far in the divs, and just couldn’t figure out the transparent-off piece. I was trying to finish up this project, and this was the last piece that just wouldn’t fall in place. I still can certainly improve with my inspector, but it’s not for lack of practice! I knew this was probably the case, but for some reason I was just missing the right selector.

    Again, thanks for your help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.