[Matt Schofield]

Hi Tikaram. Is this something you’ve been able to look into yet? Thanks

[Matt Schofield]

Thanks Tikaram

[Matt Schofield]

Thanks Tikram! That’s perfect. Thanks for all your help, Matt

[Matt Schofield]

Hi Tikram

We’ve had a few comments that our site header looks and behaves poorly. I’m not sure what I’m missing to be able to improve it. All the components move and shift around when the header changes from a slim height (when the page is scrolled to top) and when the header height expands when you scroll down. It also breaks into two lines when you reduce the screen width or view on a tablet.

Is there a way we can stop the header from changing size on scroll and just have it appear as the larger/expanded of the two sizes permanently? We’d like to keep that the background colour of the header changes when scrolling down though.

https://new.ribbletrust.org.uk

Here’s the additional CSS we’re using

.custom-logo {max-width: 200px !important; min-width: 200px !important;}

.scrolled-logo {max-width: 200px !important; min-width: 200px !important;}

@media screen and (min-width: 64em) {
	.navigation-classic .search-content-wrapper-top {
	    -webkit-box-sizing: 0;
	    -ms-flex: 0 1 30%;
	    flex: auto;
	    max-width: 30%;
	}
    .site-branding img {
        width: 100%;
    }
    .navigation-classic .site-branding {
        -webkit-box-sizing: 0;
        -ms-flex: 0 1 30%;
        flex: auto;
        max-width: 30%;
    }
    .navigation-classic .main-navigation {
        border-top: 0;
        -webkit-box-sizing: 0;
        -ms-flex:auto;
         flex: auto;
         margin-top: 0;
        max-width: 100%;
        order: 2;
        margin-left: auto;
        margin-right: auto;
    }
 	.site-header-main {
        padding: 0px 0px;
    }
    .scrolled-logo-link {
    	margin: 0px 10px;
	}
    .navigation-classic .main-navigation a {
	    color: #fff;
	    font-size: 13px;
	    font-size: 0.8125rem;
	    font-weight: 500;
	    line-height: 1.3125;
	    padding: 21px 18px;
	}
}
@media screen and (min-width: 85.375em) {
  .navigation-classic .main-navigation a {
	    font-size: 16px;
	    font-size: 1rem;
	    padding: 21px 18px;
	}
}

Thanks for looking, Matt

[Matt Schofield]

Thanks Tikaram

That’s worked a treat. Our only problem is the site logo image is reduced in scale too much when viewed on a tablet or mobile phone. It’s tiny. Is there somewhere in that CSS I can modify to enlarge the logo for tablet and phone browsers?

Thanks again!

[Matt Schofield]

Thanks Tikaram

[Matt Schofield]

Oops. The above reply was me (not Jack). Thanks

[Matt Schofield]

That’s fantastic. Thanks Skandha

Matt

[Matt Schofield]

Thanks Skandha

Please could you estimate the date of the update? I need to let my client know what’s happening.

Thanks, Matt

[Matt Schofield]

Quick update

Uninstalling and re-installing the Essential Content Types plugin didn’t fix it.

I’ve also found that editing “Gradient Base Background Colour” and “Gradient Secondary Background Colour” causes the colours of other components to change when you refresh the screen, and the gradient colours reset back to default.

[Matt Schofield]

Hi Skandha

Have you managed to find the problem?

Thanks, Matt

[Matt Schofield]

Hi Skandha

Thanks. Yes, I’m familiar with child themes.

Matt

[Author]

Posts