Header CSS for mobile and tablet?

titosmucki
(@titosmucki)

7 years, 4 months ago

So im absolutely new to wordpress, trying to make my way.

If taking a look at my header over a destop laptop, im quite satisfied with the outcome for now. But how can I make sure the additional CSS I used to adjust my header on desktop, apply also for moblie and tablet?

These are the codes I used so far:

.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

.container {
padding-top: 120px;
}

.site-header {
border-bottom: 3px solid #C0C0C0;
}

.inside-header {
padding: 10px;
}

Greatful for any help

The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)

Theme Author Tom
(@edge22)

7 years, 4 months ago

Hi there,

That code should apply to mobile as well by default.

All seems to be working for me 🙂

Thread Starter titosmucki
(@titosmucki)

7 years, 4 months ago

Thx for the reply Tom.

Unfortunately when I take a look at the page on mobile the front picture is half way covered by the header. Should be similar on a tablet
Theme Author Tom
(@edge22)

7 years, 4 months ago
Give this CSS a shot:
```
@media (max-width: 768px) {
    .site-header + * {
        margin-top: 150px;
    }
}
```
Thread Starter titosmucki
(@titosmucki)

7 years, 4 months ago

Works perfect. Thx Tom.

Last thing: The header as viewed on mobile and tablet is too thick. On desktop I could reduce its size by using following CSS:

.inside-header {
padding: 10px;
}

What can I do to change it on mobile and tablet as well?
Theme Author Tom
(@edge22)

7 years, 4 months ago
Give this a shot:
```
@media (max-width: 768px) {
    .inside-header {
        padding: 10px;
    }
}
```
Thread Starter titosmucki
(@titosmucki)

7 years, 4 months ago

Hmmm… not really smaller…

Theme Author Tom
(@edge22)

7 years, 4 months ago

Yea, that’s because most of the height is made up from the logo and the mobile menu toggle.

Our mobile header option in the pro version forces them inline, which helps take up less space.

It seems your site has a coming soon page up now. I’m trying to remember whether it has the navigation floating to the right or not on desktop?

Let me know 🙂

Thread Starter titosmucki
(@titosmucki)

7 years, 4 months ago

I disabled the coming soon mode Tom,
have a look please. I think the navigation is floating to the right? If thats what you mean…
Theme Author Tom
(@edge22)

7 years, 4 months ago
Try adding this CSS:
```
@media (max-width: 768px) {
    #masthead {
        text-align: left;
    }

    #masthead .menu-toggle {
        position: absolute;
        top: 25px;
        right: 0;
        width: auto;
    }

    .inside-header {
        position: relative;
        padding-left: 20px;
    }

    .inside-navigation {
        position: static;
    }
}
```
Thread Starter titosmucki
(@titosmucki)

7 years, 4 months ago

Thx for the great support Tom.
Much appreciated

Theme Author Tom
(@edge22)

7 years, 4 months ago

Glad I could help 🙂

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Header CSS for mobile and tablet?’ is closed to new replies.