Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2013-04-24

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) :-)