asked on

targeting nav items based on whether it is responsive or not

Hello,

On this page, in my mega menu first level menu items (car insurance, home, etc..)
http://think.darkstarmedia.net/

When viewing at 768px wide I have this style

.navbar-default .navbar-nav > li > a.dropdown-toggle {
font-size:11px;
padding: 10px 4px 10px 4px;
}

But when we switch to 767px or lower, the nav switches to the responsive menu. I want it to change the css to

font-size:14px;

I can't seem to find a way to target the difference

on a side note, it there an app that will let you select the entire path to an element?

SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

jblayney

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tom Beck

Thanks for the points, but I'm scratching my head.

You have this media query on line 733...

@media only screen and (max-width : 769px){
.navbar-default .navbar-nav > li > a.dropdown-toggle {
font-size:11px;
padding: 10px 4px 10px 4px;
}
}

... and you added this as well?

@media only screen and (max-width : 767px){
.navbar-default .navbar-nav > li > a.dropdown-toggle {
font-size:14px;
padding: 10px 4px 10px 4px;
}
}

Which means that for two pixel widths, 768 and 769, the font-size is 11px. For everything less than 768, it's 14px. Everything from 770 to 992 is 12px (one pixel difference). All that css to accommodate portrait mode on one specific type of device? It's illogical but if it works for you than go for it.

jblayney

ASKER

ipad portrait is showing the mega menu, not the responsive menu, so in order to make the menu items fit without wrapping I had to decrease the font size to 11px, any devices smaller will just get the resopsonve menu and i want the font size larger...

jblayney

ASKER

i figured it out