Hey guys.. I am working on a new website for a client of mine and I wanted to try something different this time with the layout of the logo and the header.. I know that if I select a logo within the theme settings, it will display it in the upper left. What I would like to do is treat the whole top of the page where the header would normally be and build it myself with the “Header Widget Area”..
Currently it looks like that “area” is not set to span the whole width of the page. You can look at the very crude layout I started to mess with placeholders at the URL included below in this thread request. At this URL you will see that I have the header widgets divided into an 80% section and a 20% section but it still occupies the right most area.. Please tell me what I describe is possible. Thanks so much guys.. Hope you are all doing well..
Bill Hochsprung
Hi Bill
Assuming the boxed layout, give this a try in Custom CSS:
/* Vantage Boxed Layout - 100% Width Header */ body.responsive #page-wrapper { max-width: none; padding-top: 0; } header#masthead .full-container, #main-slider, #main, #colophon { box-sizing: border-box; margin: 0 auto; max-width: 1080px; }Let me know how far that gets you and we’ll take things from there.
Thanks
Hmmmm.. Thanks for this Andrew.. I placed the code in the Custom CSS but there doesn’t seem to be a change.. I am using “Layout Builder” widget within the Header Widget area and have it divided up with 2 columns (65% & 35%).. You can go back to the page I mentioned in the thread and see the result.. Was I supposed to do something else besides save the CSS? Hope all is well.
Bill
Just noticed what your code did.. I had not seen it at first but it actually extended the masthead out to the full width instead of the header widget area where I have the placeholder text and the search bar.. What I hope to do is use the header widget area along with the “page Builder” widget and manually adjust where the logo is and what I want on the very top.. Does that make sense.. I have removed the CSS code as of now and can put it back if you like me to.
Bill
Are you still going to be using the logo? Or are you going to forgo the logo field and want the header widget area to take up 100% of the available space in the header?
Good morning Andrew… At first I was not sure.. Here is my thoughts on this.. As easy as the theme makes it to insert the logo on the page, it really does not allow you much customization as to where it appears.. You can’t really place it or adjust it..
While I see the value in making it easy for people like you have, I think I would find value in being able to insert it independent of the “Logo” setting.. So if there is a way to use the whole top section of the header widget area as I describe here, then I think that would be a good thing? What are your thoughts on this?
Bill
For sure, thanks for your feedback. Right now you can center the logo from Appearance > Customizer > General. For the majority of use cases this provides enough flexibility. We can definitely try help out with what you’d like to accomplish here but I don’t anticipate there being a change to the current logo placement and settings. Once a theme has been launched and clients are using it we’re limited as to the changes we can make. Hope that makes sense.
Let me know what you’re after here and I’ll do my best to help out.
Thanks Andrew… I get what you are saying.. For now if you have a way of helping me utilize the whole width for the top header widget space (similar to what I mentioned above) that would be great… I hope you can help me out..
Thanks,
Bill
It’s a little complicated as this area isn’t intended to take up this role. Try the following under Appearance > Custom CSS and see how you go from there:
header#masthead .hgroup .logo { display: none; } header#masthead .hgroup #header-sidebar { left: 0; right: auto; width: 100%; }Hmmmm… Not having the desired effect.. Seems like it still sees that logo space on the far left as unavailable.. Sorry to ask you for help doing something it was not intended to do.. I did not realize it was a difficult thing and unfortunately, I am not a CSS guru… Let me know your thoughts.. I will leave the CSS that you just sent enabled and you can review the site when you have time..
Thanks so much Andrew.. Try not to hate me OK.. hahaha
No problem. Assuming you put all of your header widgets inside of a Layout Builder, add the following to Custom CSS, keeping the CSS we had before:
header#masthead .hgroup #header-sidebar aside.widget { width: 100%; }Perfect Andrew.. You are a real good dude.. Much appreciated.. You have not yet failed me so thank you so much.. I really like working with you guys.. Please have a great weekend OK..?
Bill
Super, glad that helps :) For sure, you too! Chat soon. Cheers.
Oooops… I spoke a little too soon.. Things move left and right and I am able to use the whole space but when I drop a logo in there to the left as a test, you will see that it does not resize the top area as you would think it might.. We are almost there man.. almost.. hahhaa
We might need to see how this goes. If you’ve ever watched the movie Inception, we’re like 4 levels deep in the dream right now :) At some point it might be easier to use the logo and header widget area as before and let me know what you want from there.
Try removing all the Custom CSS we’ve entered and go with the following:
header#masthead .hgroup .logo { display: none; } header#masthead .hgroup #header-sidebar { left: 0; right: auto; float: left; padding-top: 0; padding-bottom: 0; position: static; width: 100%; } header#masthead .hgroup { padding-top: 0; padding-bottom: 0; } header#masthead .hgroup #header-sidebar aside.widget { width: 100%; }:-) I just laughed out loud when I read that reference.. We should tread lightly then.. We don’t want to break the dream.. hahaha…
Andrew.. This works well man.. What are you worried about dude.. Come on.. Live a little.. hahaha It’s all about bending the rules..
So.. With that said.. Check out the page and you will see that it works. I am going to ask this question and then hide in the other room incase you have the power to kick my ass through the computer.. Now that it expands and contracts vertically (nicely I might add).. Is there a way of centering the text and the search widget vertically in that space..
:: Bill Runs and Hides ::
Hahaha, you know it!
If you’d like to give it a try, let’s try rolling back to the default layout. I can help get things the same with less complications. This would involve removing the CSS we added, adding your logo to Theme Settings > Logo…and that’s it. Just let me know once that’s done. I’ll see where that leaves us and get things sorted from there.
OK Dude.. Its dude.. I guess I was trying to have the best of all things.. Being able to use that space as I wanted to was an attractive option but I don’t want to make things overly complicated.. I have rolled back all of the CSS and you will now see that even though I have the header widget area utilizing what it thinks is 100% it is still formatted far to the right.. Let’s see what we can do now..
Bill
P.S. Where are you working from man.. I don’t want to keep you doing this on a Friday night if you are oversees..
Super, thanks. Let’s try this under Appearance > Custom CSS and see how we go:
/* Header Widget Area */ header#masthead .hgroup #header-sidebar { width: 70%; }We’re in Cape Town, South Africa. No worries though, I’m around for an other 45mins or so.
Hmmm.. OK.. That moved it a bit but you can see that it is not far to the right as you would think it would be.. The two widgets in that header are set to 50% and 50% in a two column row.
Nearly there, try adding to what we already have:
header#masthead .hgroup #header-sidebar aside.widget { width: 100%; }There we go.. Looks great Andrew.. Let’s call it a night and why don’t you go chill out and enjoy the weekend man.. I am still trying to figure out what I am going to do with the site and the design.. You are awesome to work with so thank you..
Have a great weekend.. Thanks again..
Bill
Super, glad to hear we made progress there. Have a great weekend too.
Chat soon. Cheers.
But please do keep this as a cool feature you guys could implement some day.. I don’t think I am unique in seeing the value where you could have such control over the header like that am I..? Just seems like it would provide more ability to move things, adjust things… Who knows.. Maybe I am being silly.. ciao
For sure, thanks again for your feedback. I’ll mark this thread as containing a feature request.