Menu inside header not displaying correctly in responsive


Author Message
Ian Shere

Posted: 12/26/2015
Quote message 

I have a site that is using the menu inside the header (at the bottom). In wider formats it displays OK. However, when it changes to tablet or phone viewport size the "hamburger" menu button appears, it drops out of the menu area and the logo overlaps a differently colored menu area.

http://www.ckdev.info/ncp4/
 
James G.

Posted: 12/26/2015
Quote message 

Hey Ian,
All the icons and logo are pushing the responsive menu button down.
Did you adjust the layouts with artisteers responsive tool located at
the top right of the screen? If you can't get everything just perfect you
can adjust with CSS.

If it was me I would move the search element to the menu bar in responsive mode. It saves some screen real estate and makes the menu bar loom better. Just a suggestion.

James G.


 
James G.

Posted: 12/27/2015
Quote message 

A few modifications.

In the template.responisve.css

.responsive nav.art-nav {
position:absolute!important;top:81px!important;}
.responsive .art-hmenu {
background-color:#41738f;width:200px;}

In template.css
.responsive .art-header {min-height:200px!important;padding-top:10px!important;}
img, img.scale-with-grid
{
outline: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
padding-top:10px;
}

iphone view

https://drive.google.com/file/d/0B-n77YpTPCd2TzE5UkpEQXNpZ2M/view?usp=sharing

ipad view

https://drive.google.com/file/d/0B-n77YpTPCd2cVpzeUZ6d1Y2Wlk/view?usp=sharing
 
James G.

Posted: 12/27/2015
Quote message 

Further adjustments. Sorry. Was watching football at same time. :(

Responsive.template.css

.responsive nav.art-nav {
position:absolute!important;top:160px!important;}
.responsive .art-hmenu {
background-color:#41738f;width:200px;}
.responsive .art-header {min-height:200px!important;}


Template.css

.responsive .art-header {min-height:200px!important;}
.responsive #CONTROL-ID {display:none!important;}

img, a img, img.scale-with-grid
{
outline: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
padding-top:10px;
}