-
Posts
-
Hey team
I am designing a site at tara.meditationinhouston.org
I have layed out the header style I would like to achieve, but cannot get the right placement. As a result, I have two issues arising.
The text at the top is a header widget.
The menu is Logo Left, Menu Right with a large logo.1) I am trying to make a responsively centered Header Widget for all screensizes. Here is the CSS I used
.header-title {
color:#000000;
display: block;
text-align: center;
font-size: 40px;
font-family: Lato;
}.header-tagline {
color:#0397d6;
display: block;
text-align: center;
font-size: 24px;
font-family: Lato;
}a.header-tagline:hover {
color: #146e9e;
}#header .widget {
position: relative;
display: block;
width: 55vw;
margin-left:calc(33%);
text-align: center;
line-height: 30px;
}
2) I also need to get the menu to stop overlapping on all of the content at the top of the page. It is blocking the view. How can I do that?Hey KMCHOUSTON,
Thank you for the inquiry.
Adjust the style of the #header .widget using this css code.
#header .widget { position: relative; display: block; width: 50vw; margin-left: 0; text-align: center; line-height: 30px; left: 50%; transform: translateX(-50%); }Then add this code to increase the width of the sub menu container.
#header_meta .container .sub_menu { width: 100%; }These properties center aligns the element.
left: 50%; transform: translateX(-50%);Best regards,
IsmaelThank you Ismael,
It works great. I left a little of the original CSS to format the titles and remove the redundant bits. I have the desired appearance for the widget.
The menu bar still overlaps the content. How do I ensure that the content is pushed down on every page?
Cheers
Hi,
The menu bar still overlaps the content. How do I ensure that the content is pushed down on every page?
We can’t see this issue on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:
1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.
Best regards,
IsmaelThanks Ismael
When you look at the CSS on the inspect tool, you will notice I am referring to the main header.
This URL shows how it looks when it is in place – https://snipboard.io/itQrCw.jpg
This URL shows the design elements that are hidden under the main header navigation – https://snipboard.io/GWgfdQ.jpgThe October event title was hidden behind the menu. I am trying to have it so the menu doesn’t overlay the top of the page content.
Do those images clarify?
Hi,
Thank you for the screenshots.
The header height has increased significantly because of the previous modification, so you need to push the main container down a bit. Please consider adding this css code.
.html_header_top.html_header_topbar_active.html_header_sticky.html_large #top #main { padding-top: 350px; }Best regards,
IsmaelHi,
Glad Ismael could help, and thanks for the kind words I have forward it to him, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Widget in Header Issues’ is closed to new replies.