Modify Header Responsive Behaviour - Support | Kriesi.at

Tagged: header, logo, responsive

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
December 4, 2014 at 3:27 pm #362896

nigellim68
Participant

Hi

How do I modify the header responsive behavior?

1. Change the threshold between desktop and mobile browser width.
I need the page to respond when the width of the browser is about 1200 px; where do I change that?
2. Make Logo smaller when in mobile/tablet browser.
3. Make the Header Background disappear when in mobile/table browser.

Any help greatly appreciated.

December 5, 2014 at 12:45 am #363349
Ismael
Moderator
Hi nigellim68!

Thank you for using Enfold.

1.) I’m sorry but this is not possible without major modifications on the theme.

2.) Decrease the logo size with this:
```
@media only screen and (max-width: 989px) {
logo, .logo a {width: 200px;}}
```
3.) Use this to remove the background:
```
media only screen and (max-width: 989px) {
.header_color .header_bg { background: none; }}
```
Cheers!
Ismael
December 5, 2014 at 10:24 am #363479

nigellim68
Participant

Hi Ismael

I followed your instructions and it sort of work but with some strange behaviour.

When in full width, the header was normal.
When I make the width smaller, it respond correctly with the logo becoming smaller.
But when I make the width even smaller, like 768 px, the logo suddenly becomes big again.

What is causing this behaviour?

December 5, 2014 at 4:56 pm #363665
Yigit
Keymaster
Hi!

Please add following code to Quick CSS as well and adjust as needed
```
@media only screen and (max-width: 767px) {
.responsive .logo img { max-width: 70%; }}
```
Cheers!
Yigit
December 6, 2014 at 6:08 am #364020

nigellim68
Participant

Thank you, Yigit.
I did what you suggest and yes, the logo became smaller but there are 2 issues:

1. The logo does not remain in a fixed size after that. It shrinks and expands in size as the width goes up and down.
2. The logo changed position from align to the top to align to the middle

How do I resolve this?

Many Thanks!

December 8, 2014 at 4:05 pm #364680
Yigit
Keymaster
Hi!

Please replace the code i posted previously with following one
```
@media only screen and (max-width: 767px) {
.responsive .logo img {
height: 43px!important;
width: 175px!important;
}}
```
Cheers!
Yigit
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.