About Zen theme Navigation bar coding.

Posted by kyo620724 on November 13, 2012 at 6:11am

Hi Drupal guys, I have a question about the zen Navigation bar.
Well I want to make it looks more interactive, So I am looking another sample and try to add that to my page; however, there is couple questions comes out.
Here is my link
http://www.exceldesign.ca/ExcelDesign/Home
and the Sample.
http://www.mingzz.us/ExcelDesign/
Well, As you can see, my site doesn't work perfectly.
First, my Navigation bar cannot shake like the sample. I do copy the same code, but it just don't move. What do I missing?
Second, I want my Navigation bar can take the full top Nav position. My engineering&Deisng tab and Welding Engineering tab can take one line text instead of two.
Any one can help me out with this, please?

Ming

Comments

This is not Zen or Drupal

Posted by dkre.one on November 18, 2012 at 12:01am

This is not Zen or Drupal specific from what I can see..

I think your issue is just understanding the CSS. Most likely the selectors are wrong on the menu items for the hover move.

li a {
  margin-top:0;
}

li a:hover {
  margin-top:20px;
}

For you line lengths, just change the width of the links and use padding:

ul.primary-links li a {
   width:auto;
   padding: 14px 20px 15px 20px;
}

Or display as table, table-cells.

You'll get faster, better answers to these types of questions by searching google.