Full Width Header Image

Hi Ismael,

Thanks for the fast response. I am afraid I am still not 100& clear. I can extract the text from the background, but I can’t seem exactly to get the background (shaded bottom to top) to fill the entire logo area, Then are you suggesting I add the words to the logo (horizontally), with a transparent background, or do it in some other manner.

Sorry, but I have seen all the other people wanting to do this, and it seems like every solution is different. I need the background at the loco level, the menu line as a separate background (which I think I know how to do), and the extended name and phrase across the top, resizing appropriately. I would be happy to have the words be text, which I can change the size of for mobile viewing in quick CSS, but again I just need some direction. I’ve been struggling with this for days.

Thanks…. Roger

Hi,
See private details below.

It’s seems pretty simple, but I see lots of questions about this in support, so I know it isn’t. We are moving an old Joomla site to a new wordpress site, specifically because of mobile compatibility.

We need a full width banner that resizes appropriately, and I am asking for help to make that happen.

I can make the banner any size required to make this work.
I can extract the words in the banner, if that helps, if you can tell me how to insert the words otherwise.
I can use a background image for the header, or the logo in the background image, or some combination of these..
I want the menu to be below the header to have a different color background, just like the old site.,
The site currently has a white header with Logo to the left, the menu below, I’d like to keep that orientation. Details in private section with current components.

I’ve managed to sort most of this out, in the following manner.

1, There appears to be a white border line between the logo area and the menu below. How do I get rid of this, or change it’s color?
2, The mobile menu now has a red background – the same as the logo area. How do I change that?
3. I need to be able to resize the header, or use a different image, for mobile. How best to do that?

Thanks…. Roger

How I did what I wanted:

1. I used a 1130×130 logo – designed to fill the entire page;
2. I set the logo area background color in Appearance to the same color as the bottom of the logo – there were resizing issues with the image that showed the background as the original white;
3. I set the header height to the same height as the logo – 130
4. I used the Quick CSS settings below to change the menu line background color:

.main_menu ul:first-child > li > a { color: #ffffff!important; background-color: #5D5959; }

div#header_main_alternate {
background: #5D5959;
}

.sub-menu > li > a {
background: #ffffff !important;
}

Sorry for all the posts here. I’ve had to figure out the answers by searching the support forums and picking of pieces here and there. I think I have all of the issues solved with the exception of the following:

1. Change the background color on the mobile small menu box;
2. Specify a unique logo image for smaller widths – I would prefer to use CSS if I can, and would like a suggestion for the image size that will fill the header and resize when the small mobile menu box appears.
3. Pad the search icon to the right on the menu bar so it isn’t covered by the scroll bar
4. Add a different hover font color for the top level menu items only.
5. The mobile menu drop down menus now disappear when you hover over them. How do I change this?
‘
URL in private area. Home Page shows all issues.

Thanks in advance.

Roger

Yigit,

Thank you so very much.

You have solved almost every issue, and things are working much better. I had no idea that a full width header would cause so many issues, but now that I understand this, I should be able to handle it in the future.

I think my last issue regarding this is the background color on the close mobile menu (where the X displays when the menu is open). It is now using the background color on the main selector, and I would prefer it to use the background color and border of the mobile menu before opening, or perhaps some other color.

So I now have for the mobile menu:

#advanced_menu_toggle {
background: #faf2cd;
color: #710903;
border-color: #710903;
}

How can I make the “Close” menu similar? I just need to change the background and border to the same colors as the one above.

Again, thank you so much. You have really solved all my issues.

Roger

Yigit,

Thank you so much for all the help. I very much appreciate it. We have now solved almost everything with this difficult problem.

Roger

I have now solved all my issues with the exception of 1.

Drop down menus on IPad in Vertical Display

Drop down menus work perfectly on all devices, except the IPad in Vertical Orientation, where the dropdown background color changes to the top level menu selection bacground color. In horizontal mode, it works fine. On every other device it works fine. It’s just on the IPad Vertically it does this. How can I correct this.

You can see it happen by using an IPad, selecting the about menu item, and you’ll see the background is shown as Red – the highlight color. Do nothing but rotate the IPad to a horizontal position, and it goes back to the correct display – a white background.

Just as FYI, I used the following Quick CSS to highlight the top level menu on hover.

#avia-menu li:hover a {
background: #720903;
font-weight: bold;
}

Ismael,

I’m still getting the background color on the drop down part of the menu set to red – only on the IPad and only when displayed vertically. On every other device, and on the IPad in horizontal mode, it is 100% correct.

You can see it happen by looking at the website on an IPad. Start vertically, select a top level menu item, and the drop down background will be red. Rotate the IPad in your hand to horizontal – it will display correctly.

Cleared Safari cache, no difference.

The strangest thing I have ever seen. Any ideas?

Roger

Vinay,

Thank you so much. That fixed the problem.

I think this is the last issue in this long list of issues, and I very much appreciate the support.

Thanks again…. Roger