By BeaPower on

I have been trying to tweak the css files, but can't make the navigation bar 100% full in width so that the entire background is one color. This is where the links Home, etc. are.

⋅ Categories: Drupal 7.x

Comments

BeaPower’s picture

BeaPower commented

nvm solved it! :)

Lostmonkey’s picture

Lostmonkey commented

Would you mind sharing the solution? I am looking for the same thing.

Thanks,
Mikkel

mixael’s picture

mixael commented

I made menu width 100% with superfish module + superfish library.
superfish, style - simple

superfish.css

.sf-menu ul {
  left: 0;
  position: absolute;
  top: -99999em;
  width: 100%;
}
.sf-menu ul li {
  width: 100%;
}

...
add classes for menu items with needed width in percents (check is it activated in Advanced CSS in superfish configuration)
for example for 5 items with different width:

.sf-item-1 {
	width: 15%;
}
.sf-item-2 {
	width: 15%;
}
.sf-item-3 {
	width: 30%;
}
.sf-item-4 {
	width: 25%;
}
.sf-item-5 {
	width: 15%;
}

If you need delimiters you can put margins in simple.css and tune percents to get full width of your menu.

.sf-menu.sf-style-simple li {
  background: url('images/simple-background.png') repeat-x top left #FFFFFF;
  margin: 0px 1px 0px 0px;
}