Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #230477
    Matt Schofield
    Participant

    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

    #230494
    tikaram
    Participant

    @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

    #231692
    Matt Schofield
    Participant

    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!

    #231770
    tikaram
    Participant

    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

    #236837
    Matt Schofield
    Participant

    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

    #237051
    tikaram
    Participant

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

    Regards,
    Tikaram

    #237059
    tikaram
    Participant

    @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

    #237075
    Matt Schofield
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Update request’ is closed to new replies.