Ian Shere
|
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.
|
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.
|
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.
|
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;
}
|
|