help with mobile friendly version of site WordPress
- SOLVED
Hello,
I have a WooThemes Canvas theme that has been customized using methods here: http://www.woothemes.com/2013/04/case-study-stavanger-golf-club/ (there are links to the codes implemented via GitHub)
I like how it looks on the desktop but on the mobile version (iPhone), the navigation does not look good. Please help me get the menu looking like this: http://demo.woothemes.com/canvas/ on mobile version. TIA
Answers (1)
Daniel Yoen answers:
please comment out
#navigation {}
in custom.css line 55
:-)
Daniel Yoen comments:
#navigation {
font-family: Coda, sans-serif;
float: right;
width: auto;
font-size: 16px;
letter-spacing: -0.03em;
background: none repeat scroll 0 0 transparent;
border: medium none;
border-radius: 0 0 0 0;
margin-bottom: 0;
box-shadow: none;
margin-top: 0px;
position: absolute;
left: auto !important;
top: 150px;
right: 20px;
min-height: inherit;
}
to
/*
#navigation {
font-family: Coda, sans-serif;
float: right;
width: auto;
font-size: 16px;
letter-spacing: -0.03em;
background: none repeat scroll 0 0 transparent;
border: medium none;
border-radius: 0 0 0 0;
margin-bottom: 0;
box-shadow: none;
margin-top: 0px;
position: absolute;
left: auto !important;
top: 150px;
right: 20px;
min-height: inherit;
}
*/
Creativira comments:
Nice try Daniel ;)
When I do that, the menu moves down on my desktop and that is what I wanted to avoid. Would like the menu to be in the header area on the desktop.
Creativira comments:
If there is not a way to keep the menu in the header, will just let it be below the header and float it to the right.
Daniel Yoen comments:
please try use css media query like this :
@media only screen and (min-width: 768px) {
#navigation {
font-family: Coda, sans-serif;
float: right;
width: auto;
font-size: 16px;
letter-spacing: -0.03em;
background: none repeat scroll 0 0 transparent;
border: medium none;
border-radius: 0 0 0 0;
margin-bottom: 0;
box-shadow: none;
margin-top: 0px;
position: absolute;
left: auto !important;
top: 150px;
right: 20px;
min-height: inherit;
}
}
:-)
Daniel Yoen comments:
so, css active only in screen in minimum width 768px :-)
Creativira comments:
Added: result is the same :)
Daniel Yoen comments:
code still same here(media query not added yet) :-)