Jump to content


Photo
- - - - -

Nav bar choices for mobile & CSS


Best Answer keithmagvacom , 23 June 2013 - 09:33 AM

Don't know if this will help but I came across it during my travels and decided to bookmark for future reference. 

 

I haven't tried it yet

 

Follow this link to James Blanchett website

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 sheilahoff

sheilahoff

    Advocate

  • Members

  • 396 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 June 2013 - 01:50 PM

I'm brand new and exploring the nav bar options. On my desktop I'm preferring the ease of setup and look of the Classic nav bar using SimpleCSS Lite to quickly set the CSS and make them look great. You can see them at

Please Login or Register to see this Hidden Content

. But when I view that version on my Android phone the nav looks crappy. It stacks 3 high. I'm assuming that's the nature of the Classic nav bar.

 

Then I've tried both the NavBar and the Fixed. I currently have them BOTH displaying on a test site at

Please Login or Register to see this Hidden Content

. Both of these seem to be better suited to mobile.but they have such limited color selections built in. So then I'm having to figure out CSS for them. I have some experience using Firebug though I'm NOT a coder. I'm having a hard time figuring out what selectors to use when viewing the code for either of the FIxed or NavBar. I want to be able to change their colors but all I get is fix before and fix after. I don't see anything with colors for either of them. I'd appreciate a gentle guide please.



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 June 2013 - 02:20 PM

Hi Sheila,

 

I don't know if there is a gentle solution here. Likely, there will be several CSS elements that need modification.

 

Here's one: .navbar .navline > li.current-menu-item > a

 

There are several color changes needed under: .navbar.pl-color-grey

 

The menu's shadow is set here: .navbar

 

 

Nav Classic isn't as responsive as NavBar which was built to be responsive. 

 

Remember, in Firebug,  when you click the down arrow at the Style item in the Firebug menu, you can check Active, Focus and Hover, to see the specific CSS that affects the NavBar in specific conditions.  While you may change the background colors with the elements above, if you hover, you may revert back to grey for the hovered, clicked or current menu item.


  • sheilahoff likes this

#3 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 June 2013 - 09:33 AM   Best Answer

Don't know if this will help but I came across it during my travels and decided to bookmark for future reference. 

 

I haven't tried it yet

 

Follow this

Please Login or Register to see this Hidden Content


  • sheilahoff likes this

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 June 2013 - 02:08 PM

Thanks Keith.