Monitor Reply

Support

Resizing the logo

Permalink Browser Info Environment June 13, 2017 at 9:12 AM

Good morning.

Is it possible to have the logo as a resizeable image according to the device rather than wrap around when the resolution reduces for mobile devices please?

For instance, the default name for this site is Chalet Chocolat. On mobile devices it wraps and enters the banner. If I change it to an image, the menu wraps, then when entering responsive mode the logo encroaches upon the banner.

A resizeable logo would be the answer.

Thanks,
Russell.

Type:	Pre-Sale
Status:	Resolved

pilipala replied on Jun 13, 2017 at 9:07 pm Permalink Reply

Hi,

Yes, you can adjust the size of the logo in the customisation panel. While logged into your site, click on the cog icon (top left of the dashboard) > Design > Customise. If you scroll down to Top Menu, you will see there is an item called "Logo" where you can adjust the main logo size. However, if you want more control, you will need to do it using CSS and media queries.

You can use media queries to modify the size of the logo. Media queries allow you to say what styles you want at what size of device. For example:

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
}
    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    }
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    }
    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
    }

I don't know if you are trying to use a text logo, or an image logo. You may need to do a little bit of experimentation to get the sizes to suit your image or text.

To add custom CSS, click on the cog icon (top left of the dashboard) > Design > Customise. Then scroll down to the bottom on the left panel until you see “Custom CSS”. Click on the cog icon next to Custom CSS, add your own CSS and click save.

To decrease the font size of your logo, you might use something like this in the CSS (adjust font size accordingly):

div.ccm-page a.navbar-brand {
   font-size: 14px !important;
}
@media (min-width:768px) {
div.ccm-page a.navbar-brand {
   font-size: 22px !important;
}
}
@media (min-width:992px) {
div.ccm-page a.navbar-brand {
   font-size: 26px !important;
}
}
@media (min-width:1200px) {
div.ccm-page a.navbar-brand {

Viewing 15 lines of 18 lines. View entire code block.

 
div.ccm-page a.navbar-brand {
   font-size: 14px !important;
}
@media (min-width:768px) {
div.ccm-page a.navbar-brand {
   font-size: 22px !important;
}
}
@media (min-width:992px) {
div.ccm-page a.navbar-brand {
   font-size: 26px !important;
}
}
@media (min-width:1200px) {
div.ccm-page a.navbar-brand {
   font-size: 32px !important;
}
}

To change the image size of your logo, you might use something like this in the CSS (adjust height accordingly):

div.ccm-page .navbar-brand img {
   height: 20px;
   width: auto !important;
}
@media (min-width:768px) {
div.ccm-page .navbar-brand img {
   height: 30px;
}
}
@media (min-width:1200px) {
div.ccm-page .navbar-brand img {
   height: 40px;
}
}

Thanks,

Jennifer

tangent replied on Jun 13, 2017 at 9:21 pm Permalink Reply

Hi Jennifer.

Thank you very much for that, I couldn't have imagined a better and more comprehensive reply.

Best wishes,
Russell.

pilipala replied on Jun 14, 2017 at 5:09 pm Permalink Reply

You're welcome :)

Salix

Support

Resizing the logo

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post