Changing Padding on Header navigation Menu for Tablet View

Site URL: http://www.silverstreakstudio.com

Hi,

I would be grateful if anyone could help with the code to reduce the padding between the navigation items for tablet view only so that all the items fit on one line. Also, I would like to reduce the height of the header in tablet view which will mean also reducing the size of the logo. 

Ste url: http://www.silverstreakstudio.com

PW: silverstreak

Many thanks in advance.

On 11/18/2021 at 3:35 PM, Silverstreak said:

Site URL: http://www.silverstreakstudio.com

Hi,

I would be grateful if anyone could help with the code to reduce the padding between the navigation items for tablet view only so that all the items fit on one line. Also, I would like to reduce the height of the header in tablet view which will mean also reducing the size of the logo. 

Ste url: http://www.silverstreakstudio.com

PW: silverstreak

 

Many thanks in advance.

Try adding to Design > Custom CSS

/* Tablet nav */
@media screen and (max-width:900px) and (min-width:641px) {
.Header-inner.Header-inner--bottom div {
    white-space: nowrap !important;
}
a.Header-nav-item {
    margin: 0 2em !important;
}
}

Thanks so much Tuanphan - much appreciated.

Is there any way to reduce the size of the logo at the same time ?

On 11/23/2021 at 2:48 PM, Silverstreak said:

Thanks so much Tuanphan - much appreciated.

Is there any way to reduce the size of the logo at the same time ?

Use this code

/* Tablet nav */
@media screen and (max-width:900px) and (min-width:641px) {
.Header-inner.Header-inner--bottom div {
    white-space: nowrap !important;
}
a.Header-nav-item {
    margin: 0 2em !important;
}
img.Header-branding-logo {
    max-width: 70px;
}
}