![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: header logo
-
AuthorPosts
-
March 22, 2018 at 10:16 am #931115
Hi Everyone,
I’ve searched through the forums but can’t find an answer to this, on our site we’d like the logo to be larger than the header area and partially go into the body and meta areas of the site sitting on top of that other content, I’ve found quick CSS that comes close but none that actually yields the results I’m looking for.
March 22, 2018 at 11:56 am #931177Hey bdaitsupport,
I tried to access the file on the Google drive and could not, can you make it public for now?
Best regards,
VictoriaMarch 22, 2018 at 7:16 pm #931573Updated link below to a file on our web server, should have no issues with that one. Forgive the transaparent background but hopefully you should see what we mean about the purple section being smaller and the logo being lager.
March 23, 2018 at 10:54 am #931893Hi bdaitsupport,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
logo, .logo a { overflow: visible; } .logo img { width: 170%; max-height: auto; top: -15px; }
If you need further assistance please let us know.
Best regards,
VictoriaMarch 26, 2018 at 2:17 pm #933001Hi Victoria,
Not quite, in the way that the logo extends below the purple bar, we’d like it to extend above as well into the white area where the phone numbers are, or even better shrink the height of the purple reduced keeping the logo the same size, so that it passes through the middle of the logo with about 1/6th of the logo extending on each side?
Thanks,Will
March 27, 2018 at 12:16 am #933251Hi,
Please select a slim header from Enfold > Header > Header Layout > Header Size
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
#top .logo, #top .logo a{ overflow: visible; } .logo img { height: 140%; max-height: 180px !important; } #header { margin-top:40px; }
Best regards,
VinayMarch 27, 2018 at 3:31 pm #933699Hi Vinay,
The logo is getting stretched at the top and cut off. See below image :(
A copy of all Quick CSS is also below.
Thanks,
Will
-
This reply was modified 6 years, 5 months ago by
bdaitsupport.
March 28, 2018 at 12:31 am #933952Hi,
I tried to make the logo bigger as shown in your mockup but the header height is much larger on the live site and the logo needs to be extremely large to accomplish that. Please adjust the logo width and height in the CSS code and adjust the header height from Enfold > Header > Header size
Since the logo has to grow much large to make it look like your mockup it may run into menu items. If that happens please activate the burger menu from Enfold > Main Menu > Menu Items for Desktop > Icon menu
Best regards,
VinayApril 3, 2018 at 7:42 pm #936745Hi Vinay,
Still didn’t have any luck! Parked this over Easter but have come back raring to get this sorted. Though experimenting myself I have nearly got the site there, see the link below, I’d like the purple bar to stretch from one side of the page to the other. I’ve used this CSS could you help me tweek that to fill the whole div so from one edge of the screen to the other.
Will
April 4, 2018 at 7:05 am #936963Hi,
Thanks for the feedback. Please try this CSS as well:
.av-logo-container { max-width: 100% !important; }
Best regards,
RikardApril 4, 2018 at 7:59 pm #937356Hi Rikard,
That just stretches the whole page.as can be seen on the site currently.
April 5, 2018 at 7:40 am #937522Hi,
Thanks for the feedback. I don’t think there are any other solutions for having the purple bar extend across the page unfortunately.
Best regards,
RikardMay 14, 2019 at 8:47 pm #1100744Hi there! This code works fine for me, thank you so much for that:
.logo, .logo a {
overflow: visible !important;
}.logo img {
height: 140%;
max-height: 260px !important;
}But, is it possible when you scroll the page the logo is getting smaller and at the same height as the menu header? So the code above only works for the standard header and not for the sticky header!
Hope you can help me!
Janneke
May 20, 2019 at 5:10 am #1102366Hi,
Thanks for the update.
Did you remove the logo? It’s not visible in the header.
You can add this css code to adjust the height of the logo when the page is scrolled.
.header-scrolled .logo img { height: 80%; max-height: 140px !important; }
Best regards,
IsmaelJune 6, 2019 at 2:49 pm #1107953Hi! Sorry for the delay..
I didnt removed the logo. Is it still not visible for you? I tried adding your code but nothing happens!
Do you have other ideas?
June 8, 2019 at 5:35 pm #1108462Hi,
Thank you for contacting us.
The logo and the header look good when I scroll the page. You may not see the changes until the cached files are cleared in your browser.
Please perform the below steps to clear the browser cache:
1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.
Best regards,
Vinay -
This reply was modified 6 years, 5 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.