• Web Design (WordPress, Joomla, etc.)

  Full Width Navigation Bar Problems

  Posted by Jamie Wilson on January 15, 2013 at 6:58 pm

  Hi,

  I have had a problem with making this nav bar 100% width for ages. I’m not sure if the problem lies with the nav.bar container or the header.container.

  I was hoping some pro could take a look at my website and give me a hand. I have spent weeks on this 1 part so I don’t expect a reply or any help but if you do I will be in debt to you FOREVER!

  Light Evolution – LED Lighting

  I’m not sure if that works ^

  So https://www.lightevolution.co.uk

  Any and all help is appreciated,
  Thanks

  Demetri Tashie replied 13 years, 3 months ago 3 Members · 2 Replies
• 2 Replies

• 

  Matt Geier

  January 15, 2013 at 8:05 pm

  Hi Jamie.

  Thanks for posting.
  I’ve looked at the link and I don’t particularly see the issue.
  I appeared, normal.

  Can you specify what you’ve seen as the problem..
  Might also be helpful to know what broswer your running / have tested with.

  Matt Geier
  (Video Networking Solutions Expert)
  (Creative Design Workflow Consultant)
  (Social Media Networks Consultant)
  (Technical Video Industry Sales Consultant)
• 

  Demetri Tashie

  January 15, 2013 at 8:17 pm

  you need to work with/target either the li or the a element and change some settings.

  you could for instance give each list element a fixed width, or you could increase/play with the padding or margins.

  here is one way, which increases the padding of each a element inside the list element from 0.5em to 3.0em:
  #navMain ul li a {text-decoration: none;padding: 0em 3.0em;margin: 0;color: #fffffd;white-space: nowrap;}
  play around with that and see what you come up with.

  there are many other ways to accomplish this also. this is just one way.

  you can take a look at this pared down file here if that helps:
  5234_nav.html.zip

Reply to this Discussion! Login or Sign Up