Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 22, 2018 at 10:16 am #931115
    March 22, 2018 at 11:56 am #931177
    Victoria

    Hey bdaitsupport,

    I tried to access the file on the Google drive and could not, can you make it public for now?

    Best regards,
    Victoria

    March 22, 2018 at 7:16 pm #931573
    bdaitsupport

    Updated 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 #931893
    Victoria

    Hi 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,
    Victoria

    March 26, 2018 at 2:17 pm #933001
    bdaitsupport

    Hi 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 #933251
    Vinay

    Hi,

    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,
    Vinay

    March 27, 2018 at 3:31 pm #933699
    bdaitsupport

    Hi 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, 4 months ago by bdaitsupport.
    March 28, 2018 at 12:31 am #933952
    Vinay

    Hi,

    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,
    Vinay

    April 3, 2018 at 7:42 pm #936745
    bdaitsupport

    Hi 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 #936963
    Rikard

    Hi,

    Thanks for the feedback. Please try this CSS as well:

    .av-logo-container {
  max-width: 100% !important;
}

    Best regards,
    Rikard

    April 4, 2018 at 7:59 pm #937356
    bdaitsupport

    Hi Rikard,

    That just stretches the whole page.as can be seen on the site currently.

    April 5, 2018 at 7:40 am #937522
    Rikard

    Hi,

    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,
    Rikard

    May 14, 2019 at 8:47 pm #1100744
    jannnnnneke

    Hi 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 #1102366
    Ismael

    Hi,

    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,
    Ismael

    June 6, 2019 at 2:49 pm #1107953
    jannnnnneke

    Hi! 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 #1108462
    Vinay

    Hi,

    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

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.