I have a full-width header that sizes using percentages and has an .svg logo that expands to fill it’s container. The only other responsive element I need is the mobile menu toggle (hamburger menu). I would like to remove all other responsive behaviors from the header elements. What is the css to do this? I should also add that I have moved the container element to the top of the page, behind the header using the css below. As I’m sure you are aware, this become a mess for medium and small devices. Some of this “mess” might be due to the height of the header being smaller than the height of the logo container at the different device sizes.
fl-page-content {
margin-top: -151px; /Adjust depending on the height of the header for medium devices/
}
You can see the Scroller default page layout at http://support.learnwithus.training/. The first part of the logo is white, so is hidden. The svg logo is contained within fl-page-header-logo and has a max-width of 250px. As the viewport sizes, the header logo will shrink. At the small viewport size, the navigation should be shown as a hamburger menu. No other layout changes are required.
I would like to achieve the following
The content image area should display behind the header
The header row should be full width with 5% padding on the left and right
The header media queries should be removed so the header layout does not change when the viewport is resized (except for the display of the hamburger menu.)
The CSS snippet above should take care of #1. You just need to set a transparent background for the header. Can you try adding the CSS snippet below and see if it fixes #2 and #3 for you?
The CSS you provided has resolved several issues (in a much simpler manner than what I had been trying - thank you!)
You wrote:
You just need to set a transparent background for the header.
I do not see where to set a transparent background. Where is the setting? I am using version 1.5 of the BB theme.
This seems to be resolved
While looking around for the the transparent background setting I came across the setting for the hamburger menu. This is working on the medium device size. On the small device size I think the header row height is still adjusting for the menu button, which is causing the logo size to increase.
To locate the transparent header option, load up the WordPress Customizer and navigate to Header > Header Style. From here you should see a slider to configure the opacity range.
In regards to your header, are you referring to the image increasing in size when viewed on small screen devices?
If so, can you try the following CSS and see if this resolves the issue.
The header should end up looking a bit like this http://favolla.com.br/, with the exception that the logo is an svg that should automatically expand to fit the height of the header and the menu toggles to a mobile menu. Setting opacity to 0 only makes the header area display gray beneath it, not the image of the content area. Setting a width on the logo keeps it from being responsive to the size of the header. I need to remove all styling caused by the media queries so that the header has a consistent height regardless of the size of the viewport.
Question about Ben’s CSS.
.fl-page-header .fl-page-header-row > div
It seems to look best I use the below instead. Is that correct?
Are you suggesting that the >(child selector) has been converted to >( or are you saying should it be > instead?
If the latter, then no the > should always be > in CSS.
As for your question above regarding the transparency of the header with grey. The header is transparent and is showing the background color. However, I have just looked at your site again and you appear to have resolved the issue by using a negative margin.
Danny,
I appreciate that you are trying to help, but your explanation of how to properly use the greater than symbol has all been converted to the symbol so I can’t make any sense of it.
I still have unresolved issues. Here are the items in my original post:
1. The content image area should display behind the header
While I have achieved the desired result by using a negative margin, Ben stated that this could be done without CSS. If there is a setting that would give me the same result without the CSS I would prefer to use that solution.
2. The header row should be full width with 5% padding on the left and right
This is still a problem on the small viewport size. The 5% margin should remain at all screen sizes.
3. The header media queries should be removed so the header layout does not change when the viewport is resized (except for the display of the hamburger menu.)
This is still an issue on the small viewport size. The height of the header is changing (perhaps due to the menu toggle)? I need the header height to remain static at all sizes, any overflow should be visible.
The problem will be resolved when the header looks exactly the same on all viewport sizes with the exception of the logo gradually scaling smaller and the toggle to the hamburger menu.
Re #1, I actually meant the header background color opacity, not the negative margin stuff. We’ve no setting for that so you’ll want to keep that custom CSS.
For #2, we can move the padding CSS out of the media query so it applies to all viewport sizes. For #3, I’m not really sure, but can you try the revised code below and see if it’s what you’re looking for? This includes the changes on #2 as well. Just remove the previous code I gave above and replace it with this.
Thanks for the help, but I’m not seeing any improvement. For the purpose of demonstration I’ve removed everything except the code your provided so we can focus on Item 3. (I’ve added a temporary header background so that the entire logo is visible)
Large device (No problems here)
Medium device
There is now a blank area above the header. Aside from that, the header itself looks good.
Small device
When the menu switches to the hamburger toggle, the header height increases. The header height should remain fixed at all sizes. The change in the header height is probably also responsible for causing the size of the svg logo to increase which is not the effect I’m going for. The result is that When scaling from large to small this make the logo gradually shrink, then expand, then shrink again. The logo should be at its max-width for large devices and then gradually shrink down to the min-width on the small device.
Also, when scaling the width of the window, a white border can appear. Is there a way to remove this?
** The embedded images are being resized to fit the support area which makes it impossible to see the problems with the logo size.
Can you instead switch off the Fixed Header option and we’ll work from there? Basically, what’s happening right now is the theme is adding a top padding to account for when it hits the medium breakpoint. Instead of overriding the CSS for that, it would be neater if we’re to write CSS to make the header fixed instead.
