Fixing the Auto Nav Bar in Concrete5 5.6.0.2

December 31st at 12:00am

I'm fixing up another site of mine to use concrete5. As I'm migrating from static HTML files, I did a fresh install of concrete 5 with the latest version available (5.6.0.2). Unfortunately, I noticed that the Auto navigation bar was super ugly. Looks like some CSS may have changed. If you see your Nav bar looking like this, you've got the same problem:

broken_nav_bar.png

Solution

Fixing this issue is fairly simple:

  • Open your <sitename>/concrete/themes/<themename>/main.css file
  • Find the lines that describe the ul.nav-header (starting on line 25 for the Default theme)
  • Copy and paste them so they say ul.nav instead of ul.nav-header

Now my navbar looks like it used to:

fixed_nav_bar.png

 

Investigation

To figure this out I used Firebug to compare my working concrete5 website against the new site. Looks like the Nav Header's class name changed from nav-header to nav and the css was not updated.

Old, working website's Class:

OldNavHeaderClass.png

New, fresh install site's class:

NewNavHeadeClass.png