Logo in Menus

I would like to change the logo size in the small menu in the regular page as well as in the menu for mobile devices.

This is the site: http://pferdezahn-chiro.de/work/

thanks so much for your help

To change size of logo in menu and mobile please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

#gkLogoSmall, #gkLogoSmall.cssLogo,
#gkLogo, #gkLogo.cssLogo { width: 150px!important; }



and then just remember to enable "Use override CSS" option in template advanced settings tab.

Thanks. It is working in some parts. Unfortunately is the mobile version still to little. Is there a way to only change the size of this logo?
Also is the big Logo on the frontpage to small. I would like to have this bigger as well.

If you open file template/css/template.css and go to line 180 you will see there rules for your logo size with comment :

/* You can specify there logo size and background */

There you can change widht/height for you logo image to enlarge it.

I already tried to resize the logo here like you recommend.
unfortunately this is no help for the problem.

1. the main-logo in the mobile version is still too small. and there is a huge gab between the logo and the "hello"-text.
in the desktop version everything is ok.

2. the small logo in the mobile version is too small. it never changes it's size. if I change the size like you reccommend it only changes the small logo in the desktop version. not the mobile version - what I am trying to change.


This is the code in template.css:
#gkLogo.cssLogo,
#gkLogoSmall.cssLogo {
/* You can specify there logo size and background */
height: 130px;
width: 350px;
background-size: contain;
}
#gkLogo.cssLogo { background: transparent url('../images/logo.svg') no-repeat 0 0; }
#gkLogoSmall.cssLogo { background: transparent url('../images/logo_dark.svg') no-repeat 0 0; }
.svg #gkLogo.cssLogo { background-image: url('../images/logo.svg'); }
.svg #gkLogoSmall.cssLogo { background-image: url('../images/logo_dark.svg'); }
#gkLogoSmall,
#gkLogoSmall.cssLogo {
margin: 3px 20px 2px 15px;
height: 47px!important;


this is the website:
http://pferdezahn-chiro.de/work/

If you look at CSS files for this mobile and tablet views you will find there the same rules. For example in small.tablet.css line 62 there is also width and height defined. It is necessary to modify this width/height values in all these files.