Hi,
I've just done the big upgrade to D7 and everything is looking good except for the main menu bar. I've installed superfish to get the pull down menus etc. But on the D6 version, the main menu was on a black bar below the header which was underneath part of the logo.

Now with D7, the menu bar is over the logo and isn't indented. I want to avoid changing the look of my site because of the upgrade, and would like to recreate the look which I had in D6.

Is this possible at all?

Thanks
Rich

CommentFileSizeAuthor
#2 fixed-menu-logo.png20.03 KBrichH
good-menu-logo.jpg14.26 KBrichH
bad-menu-logo.jpg17.78 KBrichH

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Its just a matter of tweaking the CSS.

That said what shows on the bad screenshot should not really be happening, aka the bottom overflow.

I'm thinking about a new header design that removes the main header background entirely - that would allow the header to expand in height and be more responsive to various logo and other header elements.

richH’s picture

richH commented
StatusFileSize
new fixed-menu-logo.png20.03 KB

Hi Jeff,

thanks for the pointer. I've created a local.css and have put my code in there to style my header. It's shown below incase anyone else wants to do the same thing. I have one question though...

Some declarations such as the font-weight for the #site-name are being overridden by /sites/default/files/adaptivetheme/pixture_reloaded_files/pixture_reloaded.fonts.css?m99si6

Is there any way that I can override these in my local.css without changing the file from the adaptivetheme?

thanks
Rich

My CSS for the header....

#branding {
  text-transform: capitalize;
  width:100%;
  
}

/* stop the header appearing in D7 overlays */
#overlay-content #header {
  display:none;
}

#header {
  /* this image makes a solid blue background */
  background: #062984 url(/sites/default/files/my-files/bg-header.png) repeat-x left top;
}


#header .header-inner {
  /* this image is the groovy one with some fancy bits */
  background: transparent url(sites/default/files/my-files/header.png) no-repeat left top;
}


div#logo
{
  z-index:2;
  position:relative;
  padding:0px;
}

div#menu-bar {
  z-index:1;
  position:relative;
  padding-left: 125px;
}

#site-name {
  margin: 0;
  padding: 25px 0 0 0;
  font-size: 2.6em;
  line-height: 1.3em;
  font-family: Arial,Verdana,sans-serif;
  font-weight:bold;
}

#site-name a {
  text-decoration:none;
}
John Turmel’s picture

John Turmel commented

Jct: I have the same "Main menu bar obscures logo" problem with Drupal 7.
Sadly, the above is no help to me. Can anyone explain how to fix it in D7?

friezedrupaluser’s picture

friezedrupaluser commented

Had same issue; solution:

user@computer:~/site$ diff sites/default/themes/pixture_reloaded/css/pixture_reloaded{,_patched}.css
404c404
<   padding: 0;
---
>   padding-right: 0px;
406d405
<   position: relative;

In other words replace the folowing in pixture_reloaded.css

/* Menu-bar */
#menu-bar {
  clear: both;
  min-height: 32px;
  line-height: 32px;
  padding: 0;
  z-index: 100; /* Needed so Superfish menus appear over flash & slideshows in IE7 */
  position: relative;
}

with:

/* Menu-bar */
#menu-bar {
  clear: both;
  min-height: 32px;
  line-height: 32px;
  padding-right: 0px;
  z-index: 100; /* Needed so Superfish menus appear over flash & slideshows in IE7 */
}