Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #931115
    #931177

    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

    #931573

    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.

    #931893

    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

    #933001

    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

    #933251

    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

    #933699

    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 2 years, 6 months ago by  bdaitsupport.
    #933952

    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

    #936745

    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

    #936963

    Hi,

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

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

    Best regards,
    Rikard

    #937356

    Hi Rikard,

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

    #937522

    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

    #1100744

    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

    #1102366

    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

    #1107953

    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?

    #1108462

    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

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.