[Matt Schofield]

Hi

Thanks for looking into the gradient base colour options for us with a view to fixing with an update.

Please could you also look at fixing the font colour when classic menu is activated but viewed on a tablet/mobile? In tablet/mobile browser the hambgurger menu is activated which is great, but the font text is the same colour as the menu background (both white) so is not visible.

http://p1b.a08.myftpupload.com/

Also, is it possible to reduce the height of the site header by having the logo, search, and classic menu on the same horizontal line? There’s a lot of wasted space up there at the moment.

Thanks for all you’ve done! Matt

[tikaram]

@matt-schofield : To change the color of the menu in hamburger menu add the following additional css.

.navigation-classic .main-navigation a {
 color:#color-code;
}

Note: change the #color-code with your desired color.

For site header add the following additional css

@media screen and (min-width: 64em) {
	.navigation-classic .search-content-wrapper-top {
	    -webkit-box-flex: 0;
	    -ms-flex: 0 1 30%;
	    flex: auto;
	    max-width: 30%;
	}
    .site-branding img {
        width: 100%;
    }
    .navigation-classic .site-branding {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 40%;
        flex: 0 1 20%;
        max-width: 20%;
    }
    .navigation-classic .main-navigation {
        border-top: 0;
        -webkit-box-flex: 0;
        -ms-flex:auto;
         flex: auto;
         margin-top: 0;
        max-width: 100%;
        order: 2;
        margin-left: auto;
        margin-right: auto;
    }
 	.site-header-main {
        padding: 2px 40px;
    }
    .scrolled-logo-link {
    	margin: 0;
    }
    .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 25px;
	}
}

Let me know if this helps resolve your issue

Regards,
Tikaram

[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!

[tikaram]

Please try adding the following additional css

@media only screen and (max-width: 768px) {
  .custom-logo {
    min-width: 260px !important;
  }
}

Let me know if this helps resolve your issue.

Regards,
Tikaram

[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

[tikaram]

@matt-schofield : I will look for the issue and get back to you soon.

Regards,
Tikaram

[tikaram]

@matt-schofield : Please add the following additional css and let me know

@media screen and (min-width: 64em) {
    .fixed-nav .site-header-main {
	    padding-left: 20px;
	    padding-right: 20px;
	}
	.navigation-classic.fixed-nav .main-navigation a {
	    padding: 10px 18px;
	}
	.navigation-classic.fixed-nav .main-navigation {
		margin-top: 0;
	}
	.scrolled-logo-link {
		margin: 0;
	}
	.navigation-classic.fixed-nav .site-header-main {
		padding-top: 0;
	}
}
 @media screen and (min-width: 75em) {
    .fixed-nav .site-header-main {
	    padding-left: 40px;
	    padding-right: 40px;
	}
}
.fixed-nav .custom-logo-link {
	display: none;
}

Regards,
Tikaram

[Matt Schofield]

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

[Author]

Posts