Header Image Won't Align With Menu

By busterandtoastie on 20 Aug 2014 at 22:11 UTC

I am currently working on a subtheme of Zen, and I am having an issue. I replaced the logo with my header image. And I replaced the navigation bar with the Nice Menus module so that I could have a drop down menu.

Now my header image and main menu will not line up. In internet Explorer, the header is too far right. In Chrome, the header is centered, but it is not the same length as the main menu.

I can't figure out what I am doing wrong.

Here is a link to the web page:

http://dcj.firsthandmedia.com/home

Any help would be appreciated.

Comments

=-=

VM commented 21 August 2014 at 03:46

The issue with cross browser alignment is in part due to the 10px of padding on the following:

#header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, #footer

The issue with the menu being wider than the image is because the region that the menu is in is set at 1200px and the image is 1180px.

As an aside I'd rethink the image in the header in the way you have it. There is some important information in the image that can't be indexed by search bots when in an image.

Thank you for your reply.

busterandtoastie commented 21 August 2014 at 12:15

Thank you for your reply.
In regards to the padding, should I remove the 10px of padding on the regions you mentioned? This is my first time using Zen and I am unfamiliar with this issue.
Is there a way for me to make the header and menu stretch across the whole screen and still have the website be responsive? I want it to still look good on mobile devices.

=--=

VM commented 21 August 2014 at 15:35

should I remove the 10px of padding on the regions you mentioned?

I'd certainly start my testing there. Utilize chromes developer tools or is firefox is your go to browser use firebug to work with manipulating the CSS live. Note, the snippet I provdided is a single CSS declaration in your stylesheet.

Whether Zen or another theme manipulating CSS is a task that is the same across all themes.

Is there a way for me to make the header and menu stretch across the whole screen and still have the website be responsive? I want it to still look good on mobile devices.

You would have to manipulate those regions to be 100% rather than a fixed pixel width.