-
Posts
-
Hi, is it possible to make the background header image sit above the main menu bar with padding (below the image)? On a normal desktop the header looks fine – background image with a black gap below followed by the green main menu bar under that. However if you resize the screen (resize the browser) so the burger menu appears we are left with a big black gap under the header background image.
Important to note – I have not yet changed the header background to the correct image. I currently have the coloured stripes as an image (centered) sitting on a black background. We are going to have our logo, three stripes and the black background (above the stripes) as one background image. Where the stripes currently sit is where the stripes in the new image will also sit.
Basically is it possible to have a background image sit above the main menu bar?
Link to site is in private content.
Hey VerhoevenGroup,
Thank you for contacting us.
Your requirement is not clear, please upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)
https://snag.gy/
https://ctrlv.cz/en/
https://imgur.comBest regards,
Vinay1. The header as we want it to look like:
https://snag.gy/BcQp1k.jpg2. The space below the header image:
https://snag.gy/dugNhq.jpgWhen the browser is narrow the main menu reverts to the burger menu. However as you can see a black bar sits below the three green stripes.
At the moment the header is set to a black background with the three stripes inserted as the header image centered.We are working on having the logo, the black background and the three stripes in one image. Therefore this will be our header image.
However when we set this as our header image this will need to be set to sit ‘bottom left’ – however the green menu bar (as seen in screen shot 1) will cover part of the three stripes in the image. But if we set the image to sit center center then we will get the black bar when the browser is smaller and the main menu reverts to the burger menu.
Therefore is it possible to have the main menu bar sit seperate below the header image. Or is there another way/solution to achieve this?
I hope this makes more sense!
Thank you
Hi,
Thank you for sharing the screenshots.
Yes, it is possible to make the header look similar to your mockup https://snag.gy/dugNhq.jpg
1. Please upload your logo from the theme options: Enfold Options > Logo
2. Upload the header background image from: Enfold > General Styling > Logo Area
3. To activate Burger/Icon menu for desktop go to Enfold > Main menu > General > Menu Items for Desktop and select Icon menu.Lastly to adjust the spacing above and below the logo please check https://kriesi.at/documentation/enfold/logo/#space-above-and-below-the-logo
Feel free to adjust the numeric values in the CSS code to suit your design.
If you have any issue please write back to us here so we can help you achieve the design similar to the mockup you shared.
Best regards,
VinayHi Vinay,
Thanks for your reply.
I have already entered a logo and the header background image into the enfold styling setting as you mentioned above. What I’m asking is – is it possible to have the header background image sit above (seperate) from the main menu bar at the bottom of the header?At the moment our header has a black background colour. The header background image has been inserted sitting at ‘Centre Centre’. We would prefer the header image to sit ‘Centre Bottom’ as we need the three green stripes to sit at the bottom of the header when viewing from a mobile or tablet with a burger menu. And when viewing from a desktop we would like the three green stripes in the background header image to sit above the green main menu bar with padding between the header image and the green main menu bar.
However our current issue with this is that if we set the header background image to sit ‘Centre Bottom’ our three green stripes (in our background header image) sits behind the seperate green main menu bar.
This is our background header image (the three green stripes are at the bottom of our header image):
https://snag.gy/jWGHU8.jpgWhen viewing from a desktop (or wider screen) we want the header image to look like this (background header image with padding between the bottom of the image and the green main menu bar):
https://snag.gy/jWGHU8.jpgWhen viewing from a smaller screen such as mobile the header currently looks like this:
https://snag.gy/rYcPlF.jpg
*because we currently have the background header image situated ‘Centre Centre’ with black set as the background colour for the logo/header area when in a smaller screen we are left with this unwanted black under the header image.We want the header image to sit ‘Centre Bottom’ (so the header looks right on a smaller screen such as mobile) but to do so the background header image needs to sit above the green main menu bar so that the three green stripes in our background header image isnt hidden behind the green main menu bar.
How do i achieve this?
Thanks
Hi,
Yes it’s possible to move the background image position using CSS.
You can also try changing the background color for the menu bar from solid green to a black background color.
/* Main menu background color */ #top #header_main_alternate { background-color: #000!important; }This is what I see on my end so I’m unable to investigate your issue.
Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
VinayHi Vinay,
I thought what your seeing must be different to what we are seeing…
The Header as a whole looks as we want it to when viewing on a normal desktop. However when we are viewing on a phone OR adjust the browser screen narrower so that the main menu turns into the burger menu there is a black section between the background image and the page content (eg the video on the home page).
When viewing on a phone (or a small screen) we want the header image to sit at the bottom of the header – so that there is no black section between the header and the page content.
Is this possible? – But keep the normal desktop view the same
Below is the preview link to our site:
http://210.5.50.146/plesk-site-preview/kawasaki.co.nz/210.5.50.146/
(not all content appears on our preview link (video/home page video)Hi,
The link does not work for me. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.Best regards,
VinayHi Vinay,
Thanks for your quick reply.
I have set up the temporary login (please see the private content for the login link). However I’m not sure that it will work as we have had to change the host settings on my desktop computer so i can work on the new site while the old current site remains live.
Hi,
I’m sorry to say that there is nothing visible on the link you provided.
Please try to upload the background image from Enfold > General Styling > Logo Area and select option:
Position of the image: Top Center
Repeat : Tile Horizontally or No repeat if you have a large image that can cover the whole screen.
Attachment: ScrollBest regards,
Vinay
I have the problem with heading area background which isn’t full width but title or repeat like this. Even I make it center or bottom center which will scale my image down. What’s the exact width for that area? Will it be responsive?Hi,
It is difficult to provide the solution without inspecting the element, thanks for your understanding. I tried to troubleshoot this issue again but the login URL/credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?
Best regards,
VinayHi,
I tried to troubleshoot this issue but the login credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?
The user role for the account you send us should be set to ‘administrator’ so we can try to disable all plugins and add custom code (if necessary) to resolve the issue.
Your credentials should include:
1. WordPress admin Login URL
2. Username
3. PasswordBest regards,
Vinay
- You must be logged in to reply to this topic.