This topic has 8 replies, 3 voices, and was last updated 8 years ago ago by Eva Kemp
Trouble with logo overhang and sticky header; and FAQ
Header
Hi folks, we’re trying to wrap up our little site, but we’re having trouble with the header in both the default view and the scrolling slim or sticky header view.
Also, the FAQ
If you open and close a few FAQs you’ll notice that after a one or two closing a FAQ item, the copy stacks over the content in the block above it. What’s the story here? How do we fix this?
Wondering if you can help us?
Hello,
1) Sorry, but your query is unclear.
Please show a screenshot of the issue and what you want to achieve.
2) I’ve added this code in Global Custom CSS. Please check.
.ult_tabs .ult_tabcontent{
height:auto !important;
}
Regards,
Robert Hall
1. Sorry, I meant to provide that information. Please see links to the homepage default view that shows the header in its default state, and the header as a sticky header when the user scrolls down.
DEFAULT VIEW:
http://www.st48.com/demofbf/wp-content/uploads/2016/10/FBF-Homepage.jpg
FIXED/STICKY HEADER VIEW:
http://www.st48.com/demofbf/wp-content/uploads/2016/10/FBF-fixed-header.jpg
Please advise. Thank you. Theresa
Hello,
Sorry, but I can’t understand what exactly you want to fix there. Do you want the transparent background in default and fixed header?
Regards,
Robert Hall
A few things going on there:
1. the header should be slightly transparent
2. The masthead image (farm) that is currently displaying under the header bar should be layered beneath the header.
2. the scalloped fluffy bottom farms logo should hang over….about the last 1/4 of the logo should sort of stick out a little.
You can see it better when you look at the sticky header example where we show the user has scrolled down the page.
LMK if you need more information. I really appreciate your assistance. T
Hello,
I’ve added the following code in 8theme Options->Styling->Custom CSS->Global Custom CSS. Please check.
.home .header-type-3 .header {
background-color: rgba(255,255,255, 0.9);
height: 110px;
}
.navbar {
padding: 10px 0;
}
.home .header-type-3 .header .menu-wrapper {
display: inline-block;
padding-top: 20px;
}
.fixNav-enabled .fixed-active .header-wrapper {
background-color: transparent;
}
Regards,
Robert Hall
Yes! Thank you that solved the problem in the desktop view. In the mobile view – the logo looks like it gets stuck behind the masthead image. if you squeeze the page down to mobile view, you’ll see it right away.
Thank you and please advise. Thanks, Theresa
Hello,
Please add this code in Custom CSS for mobile section:
.template-container .header-logo {
z-index: 1;
}
Regards,
Eva Kemp.
You must be logged in to reply to this topic.Log in/Sign up