Custom header, transparent with hamburger menu to full screen overlay
I'm trying to build this header with transparent menu and slider revolution below. If I make a custom one it is not transparent and the slider is not below the header. Also, I cannot get the hamburger menu to work with the full screen overlay menu.
But it should be possible right? Thanks for your help.
Comments
Hello,
You can achieve this display with the Header Builder.
Please, check the following video tutorial:
https://support.muffingroup.com/video-tutorials/header-builder-2-0/
Only opening the hamburger menu to full width would require writing a custom CSS code, but I can help you with that when you create your header, and send a link to your website.
Best regards
I got it working. Can you help me with the CSS code for the hamburger to full width?
I am not much of a coder. Thanks again.
Please, try the following one:
.mfn-bring-to-front .mfn-header-tmpl-menu-sidebar{ width: 100%!important; }If this will not work, please, attach a link to your website.
Thanks
It works, but it's totally unstyled and the close button isn't present. I managed to get a red background color but that's it.
Can I use the menu builder to shape it further or do you have a basic set of CSS that I can use for the rest?
I'd like to make something that looks like this:
I tried changing font sizes with theme options, but that also doesn't work.
1) The close button should be there, and to check why it does not appears for you I would need a link to your website.
2) You can add the arrows to the menu items in the Appearance -> Menus.
3) There is no option to set three columns of menu items, and there can be displayed only one column.
4) When you are using the Header Builder all settings need to be set there, and Theme Options does not have an influence into that.
Best regards
Thanks for the answer, I will look into it.
What if you are a good CSS coder, would it be possible then to use and style two columns? Could I hire someone to make it for me?
4) When you are using the Header Builder all settings need to be set there, and Theme Options does not have an influence into that.
Can you please have a look at my installation / site and see why the menu isn't working properly?
the address: https://matthijssenlichtreclame.nl/home/
where can I send login and pass with PM?
3) It should be probably possible.
If you are searching for someone to do that, I suggest checking the following link:
https://www.rewrkz.com/
or you can ask on our FB group:
https://www.facebook.com/groups/betheme/
4) Please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please make sure that the data you are sending are complete and correct.
Thanks
It took me a while, but I found the close button, not visible though, only the link. It is in the very right upper corner of the screen, not on the place of the hamburger menu in right corner of the site.
I also notice that the overlay menu needs to have a width of the full page (1920) instead of the boxed width (1440) of the site to cover the content. My conclusion is that the menu covers the whole screen instead of the site.
Please tell me how to fix this. The overlay menu needs to work with the hamburger menu over my boxed site of 1440px.
thanks,
Sorry, but we didn't get any private messages from you yet.
Please check your mail inbox for our response. Look also inside the spam folder.
If you don't have any message from us, please send your login credentials again.
Be sure that you sent all of the required information mentioned in the previous message.
Thanks
I sent it yesterday and got a confirmation. Please let me know if you are able to login and see.
If you want to have a boxed website layout and cover only the content, then there is an option to achieve that.
You can only cover the whole window by doing the following:
In your Theme options put the CSS from my second message, and it will expand the menu to the full width.
Transparency of the sidebar can be set in the Menu Burger element options.
Best regards
I did exactly what you said, but then the menu close button isn't visible and the overlay covers the whole screen, not just the boxed website. I'll put it live again OK?
I think I have found the issue, it is browser related. Using safari on the Mac, the sidebar only shows over the page when slider revolution is used, not full screen. In Firefox, everything works fine.
I have another challenge that is probably very easy for you. My client wants a background like the following example:
I made a page like it with a transparent section and header, but I can't seem to place a background like the picture above. Can you help me in the right direction?
Do you mean the circle in the background?
You can set both the background color, and the image as the section background, and the image will be at the top of the color.
Best regards
is it possible to show in the background of the total site? In the example above the sections are over the background image.
it's this website: https://www.style26.nl/onze-missie
You can set it in Betheme -> Theme options -> Global -> General. You should also check the Transparency: Content option because without it, the background image will hide behind the sections and the content.
Thanks
Thanks again! but that would mean it shows everywhere. Is there a code to show a different background image for different pages? CSS?
I tried a few I found online but no luck.
I think I got it working! thanks again;.
Is it possible to make something like this with the hamburger menu in the custom header?
Open the menu burger options, and in the style tab set the padding value, background color, and border-radius.
Best regards
That worked out just great! Thanks again.