Navigation: CSS Style & positioning for the 3 devices/sizes DT, Tablet, Phone

Hi Rene,

Please notice that this board is very limited in resonding to many questions in one thread like this one and it is not possible to quote properly. But I will try my best to answer to you:

You wrote:
“For the DT and Tablet versions:
I would like to change the nav location to the top (which I did by changing it’s position in the php file) and the Nav list item position and be able to style the primary nav differently while leaving the the small/Phone style mainly as it is.”

My answer:
First of all the theme is not intended to change everything in every screen width and every device. It comes with an overall layout, which will be displayed in all of these. And it is nearly impossible to have options for everybodys wishes. You want your nav location at the top. The next person want to change the nav location to the bottom and have it as a flash file. Next one want it upside down as a float at the side of his window. If you can do this by your own in PHP than lucky you. You skills set seems to be very sufficient to me to understand that.

You wrote:
“For example, I wanted to have:
li items centered vs left in the div/container, and change the dropdown background div width, color, etc.”

My answer:
This can be done. Maybe my tutorial “Adjust the navigation bar”

http://www.mouseclick.com/tutorials-2/adjust-the-navigation-bar/

can help you for colors and adjustments.

You wrote:
“I did experiment with this and some of it was okay for Desktop & Tablet sizes, BUT I found that most importantly, whatever style and position changes I made affected the Mobile Phone NAV which looked and behaved terribly and was totally screwed up.”

My answer:
What I described in my tutorial should work for almost all the options I mentioned there, also for the mobile phone nav.

You wrote:
“The CSS seems to target ALL the sizes/devices, together, or, I can’t find the right html and don’t have the skill set to know where it is, or how to target them.”

My answer:
The theme has code that responds to the choosen layout and the actual size of the width according to the corresponding CSS defintions, which are set at “@media screen and (max-width : ACTUAL WIDTH) for each size and layout within.

You wrote:
“My question to you is:
Is it possible to target through specificity in CSS the DT and Tablet sizes by adding classes, or something so that I can style and position the NAV differently for those sizes only? Or, some other way, like with the html?”

My answer:
Well, this post was specifically addressed to David. Ignoring this fact: by adding something it is always possible to change something.

You wrote:
“And how would I do that, what items/elements need to be targeted with new classes or html?”

My answer: That depends merely on WHAT excactly you want to change. A color shift of a list items may needs a different adjustment or code segement to add than moving elements around. And as I said before the wishes one can have are way too many to have them all covered with one answer or one piece of code in a thread like that, not knowing what excactly should be achieved.

Cheers,
Alexander @ http://www.mouseclick.com