I'm trying to have my menu span to the size of the block it's in (header). I know I'm missing something basic here and it should be easy to do. I've read a lot of posts on this some suggesting width: 100% others adjust padding or margins. I'm having no luck. I think if I could just figure out which css tags to put the code in might get it.

Maybe seeing this from firebug will help with an answer?

<div class="region region-header">
<div id="block-superfish-1" class="block block-superfish first last region-odd even region-count-1 count-2 with-block-editing">
<div class="content">
<ul id="superfish-1" class="sf-menu primary-links sf-horizontal sf-style-default sf-total-items-8 sf-parent-items-1 sf-single-items-7 sf-js-enabled sf-shadow">
<li id="menu-469-1" class="active-trail first odd sf-item-1 sf-depth-1 sf-no-children">

This is what is in the superfish default.css file. I've commented out all padding trying to figure out what's going on.

.sf-menu.sf-style-default {
  float: left;
  margin-bottom: 1em;
  /*padding: 0;*/
}
.sf-menu.sf-style-default.sf-navbar {
  width: 100%;
}
.sf-menu.sf-style-default ul {
  /*padding-left: 0;*/
}
.sf-menu.sf-style-default a {
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  padding: 0.75em 1em; /*top and bottom of each menu link*/
  text-decoration: none;
}
.sf-menu.sf-style-default a,
.sf-menu.sf-style-default a:visited  {
  color: #fff;
}
.sf-menu.sf-style-default a.sf-with-ul {
  /*padding-right: 2.25em;*/
}
.sf-menu.sf-style-default.rtl a.sf-with-ul {
  padding-left: 2.25em;
  padding-right: 1em;
}

Thanks!!!

Comments

hschott’s picture

It was the padding in this tag:

.sf-menu.sf-style-default a {
border-left: 1px solid #000;
border-top: 1px solid #000;
padding: 0.75em 2em 1em; /*top,left/right,bottom of each menu link*/
text-decoration: none;
}

chiappa’s picture

I dont get it, what are you suppose to do with the padding?

Greetings from [url=http://maytoursbeijing.info/]May Tours[/url].

chiappa’s picture

Well, what I did for now is in default.css:

.sf-menu.sf-style-default a {
  border-left: 1px solid #fff;
  border-top: 1px solid #CFDEFF;
  padding: 0.75em 1em;
  text-decoration: none;
  width: 98px;
}

added this line:

width: 98px;

To my great surprice this worked also on IE 8 but I have my doubts about this fix. I would like to have the menu expand to 100% not dependent on the size/amount of menu items.

Greetings from [url=http://maytoursbeijing.info/]May Tours[/url].

harri00413’s picture

Also would like to span whole width dynamically.
Suspect display should be table-row and width 100%, like with umm tables..

True = False