Top Main Menu Not Resizeing With Screen Size

Hello Tim,

I added a image to the header but in order for me to get the Top Main Menu bar under the image I had to increase the "Height to 650" under the header section. Now that looks good on our 4k 3840 resolution monitor but when I look at the site on a different size monitor, there is a big gap between the header and Top Main Menu.

Is there a way to make the header stretch across the screen, have the Top Main menu always be under the header, and resize based on the screen size so there is not that gap between them? Here is a link to our page so you can see what I mean: http://mojoimagery.com/pictures/

Thanks for your help

Best
Joe

Edited by

First delete what you have in the header section.

Edit your theme.
IN the header menu, check the option for "Transparent Background".
Set the height to around 180

In the additional CSS section in the left menu, add the following code:

#headerAndMenuInner {
background: url('/pictures/sy-misc/Pano%20of%20Fields.jpg') no-repeat ;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-position: center center;
}

Edited by

Hello Tim,

I've exactly the same Problem Joes described. I've done all your instructions, but there is still a big gap between the Header and Top Main Menu. I wonder where this strange Pano of Fields.jpg is located and guess it won't work unless the URL '/pictures/sy-misc/Pano%20of%20Fields.jpg' Returns a valid file.

Is there a way to dynamically extend the 'spacing' of the Top Menu, so the Menu Buttons are spread 100% over the Screen width?

Regards,

Lucas

+++ UPDATE +++

Maybe the Pano of Fields jpg must be replaced through the URL to our logo and the Header Section has to kept empty. I've tried this, but with no success: The Logo is displayed 100% width but the menu is still fixed Position. In Addition the mobile Header is placed over the hard-coded logo. Thus I think the Pano of Fields jpg must be something like a invisible placeholder, isn't it?

Edited Sun Jan 14, 18 9:58 AM by Lucas H.

I don't see a gap like was described above. He was actually using an image as a background in the header. Do you mean the gap around the client menu?

There isn't way to have the buttons spread 100% of the screen.

Edited by

I'm using a Image in the Header, too. The Image is always 100% width which is fine, but the menu is fixed and does not comes up to the Header if displayed smaller due to decreased with of page.

See here: http://sytist-test.greatoffice.net/

A Workaround is, to decrease the dimensions (height) of the Header Image suitable for low-res Monitors and then adjust the height of Header accordingly. Maybe I've understood Joe's issue wrong. Is there a way to set the height of the Header dynamically based on the displayed Header Image size, so the top Menu is always underneath that Image (and comes up, if the Header is displayed smaller)?

Edited Sun Jan 14, 18 11:31 AM by Lucas H.