How to resize the icon size in menu?

How can I change the size of the icons and make the width of each icon layer (the blue transparent) behind the icon the same size and place them a bit closer together?
See this example:

icon-gk-short-menu-comprime.jpg

Could you please post an url to your site?

[url]hochzeitsautomieten.de[/url]

Sadly, it cannot be changed with one line - this style is spread accross rwd specifications and reducing spaces between icons would require to either modify template core files (which is quite bad idea as with update of the template you would lose all the changes) or import all of them to override.css.
Adding spacing around icons is a little bit more easy:
Please edit: /templates/gk_steakhouse/css/override.css and add at its end:

Code: Select all

#gkHeaderMod .gk-short-menu li {
padding: 10px;
}


Will add 10px padding around the icons.
Remember to enable "CSS override" in template settings - advanced section.

yes, i understand. Since some time ago (since you suggested already I started using override.css for every alternative. Changing source codes cost me time and sometime I just got lost;-(

But another question concerning my icons as the background behind every seems to scale with the size of the icon itself:
How can I change the size of the awesomefont icons?

Actually it is also RWD dependant, but please search the file:
templates/gk_steakhouse/css/gk.stuff.css
for:

Code: Select all

#gkHeaderMod .gk-short-menu i


you should find few places where font size is set depending on screen height.
Also the text that shows under the icons is RWD dependand:

Code: Select all

#gkHeaderMod .gk-short-menu span


above declaration which you can find twice is setting its size depending on screen height.

ok - i found it.
do I change ALL fontsize values in the blocks under the #gkHeaderMod .gk-short-menu i:

from here
#gkHeaderMod .gk-short-menu i {
display: inline-block;
font-size: 56px;
line-height: 54px;
margin: 0 auto;
}
#gkHeaderMod .gk-short-menu .gk-icon-dinner-set-solid {
font-size: 64px;
position: relative;
top: 4px;
}
#gkHeaderMod .gk-short-menu .gk-icon-calendar-solid {
font-size: 42px;
position: relative;
top: -4px;
}
#gkHeaderMod .gk-short-menu span {
display: block;
font-size: 14px;
font-weight: 600;
} <<< til here?
@media (max-width: 1500px) {
.gk-over-map { overflow: hidden; }

Those font sizes and declarations tweak each icon to look the same.
You can copy only declaration and font size to override.css if you want to modify only that and leave the rest:

Code: Select all

#gkHeaderMod .gk-short-menu .gk-icon-dinner-set-solid {
font-size: 64px;
}