Mobile header

Hi,

I got this banner on postion bannertop. Only the banner will disappears when you visit the website by mobile.
Can I get it also when people visit the mobile website?

link

The banner can be shown but what is more important - you then would need to decide how it should look.
You will have 3 big elements - logo, banner and login - they need to fit together somehow.
Please create a mockup of how should it look like an I will try to help.

Hi,

It's no problem to lose the logo and place the header instead.

See below, left is original with logo, right is how I want it (without logo but with header).



tnx in advance

The logo can also go under the mainbody module....or better, in the sidebar if that's possible.

Hi,

It's no problem to lose the logo and place the header instead.

See below, left is original with logo, right is how I want it (without logo but with header).



tnx in advance

Please edit: /templates/gk_magazine/css/override.css and add at its end:

Code: Select all

@media (max-width: 1030px) {
    #gkBannerTop {
        display: block !important;
    }
    #gkLogo {
        display: none;
    }
}


This is closest I can get without bigger changes.

Remember to enable "CSS override" in template settings - advanced section.

tnx!!!

Is it possible to have the logo in the toolbar when the width hasn't reached 1200px (I changed it to 1200 instead of 1030)?

Yes, please try this media query code:

Code: Select all

@media (max-width: 1175px) {
    #gkBannerTop {
        display: block !important;
    }
    #gkLogo {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        max-width: 52px;
    }
    #gkToolbar {
        top: 78px;
    }
}


Whut?! You're great! Tnx a lot

Only when I view the 'mobile' site in potrait mode..the logo is bigger then the toolbar. In landscape mode it fits perfectly.

Yes, please try this media query code:

Code: Select all

@media (max-width: 1175px) {
    #gkBannerTop {
        display: block !important;
    }
    #gkLogo {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        max-width: 52px;
    }
    #gkToolbar {
        top: 78px;
    }
}


Please try changing:

Code: Select all

max-width: 52px;


to 40px value.

tnx, this did the trick

Only when the gklogo hover is to big. When u go with your mouse over the logo a big green bar appear. I don't need a gkLogo hover. See screenshot

Complete solution:

Code: Select all

#gkLogo:hover {
    background-color: transparent;
}

@media (max-width: 1175px) {
    #gkBannerTop {
        display: block !important;
    }
    #gkLogo {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        max-width: 52px;
    }
    #gkToolbar {
        top: 78px;
    }
}


tnx!

No problem .

Is it possible to have 2 variables in max width?

Code: Select all

@media (max-width: 1175px) {
    #gkBannerTop {
        display: block !important;
    }
    #gkLogo {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        max-width: 52px;
    }
    #gkToolbar {
        top: 78px;
    }
}

I also want if the 'max-width' is< 580 the width of #gkLogo must be 40px.

This is because the toolbar has 2 differtent thickness (on mobile 40px and tablet 52px)

edit:
I've added this code in overide.css and it works now !

Code: Select all

@media (max-width: 580px) {
    #gkLogo {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        max-width: 40px;
    }}

You can use range defined with max-width and min-width but rwd practice shows that it is better not to use ranges but progressively add other layout elements when more of browser size is available.