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

    Ahoy,

    How do I increase the size of my logo on my page and ensure it is centered?

    #727192

    Hey mcraig77,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .html_header_top.html_logo_center .logo img {
        margin: auto;
    }
    .html_header_top.html_logo_center .logo {
        left: 0;
        -webkit-transform: none;
        -ms-transform: translate(-50%, 0);
        transform: none;
        width: 100%;
    }
    

    Best regards,
    Yigit

    #727344

    Ahoy,

    I went ahead and added that but the logo size is the same. I do have some custom code which was provided in this thread to make things the logo center and menu to the right and left.

    Please Advise

    #728292

    Hi,

    move (top, left) and increase (height) it with this code:

    .html_header_top.html_logo_center .logo {
    top: -10px;
    left: -4px;
    height: 77px;
    }

    Make sure none of your other code is causing any conflicts.

    Best regards,
    Andy

    #728807

    Ahoy,

    I tried that code but now the log acts weird. It is the size that I want but not when I shrink the browser window the logo jumps to the top right and shrinks… I need the logo to stay center. Than when the mobile setting kick in it goes to the left and it is not centered in the header.

    Please advise.

    #728898

    Hi,

    I can’t see any jumping, not even any shrinking anymore. Can you provide us a precise link where we can see what’s going please?

    Best regards,
    Andy

    #729192

    Ah Sorry, I updated the domain. New link below

    #729497

    Hi,

    I can’t see anything neither on this link. Please check.

    Best regards,
    Andy

    #729592

    Hi,

    So if you go to the link I provided you will see the issue.

    When the browser size is normal the logo is fine. screenshot 1

    But when i minimize the browser the logo starts to shrink to the right top, it does not stay centered screenshot 2

    than once it hits the mobile settings it jumps to the left side of the men but the logo and social media, and social are not centered screenshot 3

    please advise

    #730276

    Hi,

    you need to work with media queries. So wrap them around the code I’ve provided to you, something like this for example:

    @media only screen and (max-width: 1024px) { 
    .html_header_top.html_logo_center .logo {
    top: -10px;
    left: -4px;
    height: 77px;
    }}

    Adjust media queries and values like top, left, height as needed. Refer to this for more information: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    #730498

    Hi Andy,

    Hmm I tried adding that code and looking at the page but am still having trouble. The logo is still shrinking in the top right or not moving at all, and is always not centered. I would like it always centered until it hits the mobile version of the website.

    I know this is possible seeing I was helped with this issue before with this site ( see private) The problem is i’m not sure what code I used. I wish there was a way to search just my threads seeing I could prob figure it out, I just have too many seeing I use this theme for all my clients – don’t worry I have them all pay for it :)

    Please Advise

    #731104

    Hi,

    again: you need to work with different media queries. If you need help with this, then refer to: http://kriesi.at/contact/customization

    Best regards,
    Andy

    #731335

    Hi Andy,

    I think there might be an issue with my quick css code, i’m determined to figure this sucker out! Is any of this quick css code conflicting?

    Hers is what I have in my code to center it

    .av-main-nav li:nth-child(3) {
        margin-right: 20vw;
    }
    
    .av-main-nav li:nth-child(4) {
       margin-left: 5vw;
    }
    
    .container.av-logo-container {
        top: 25px;
    }

    Here is the screenshot of what that looks like (see below)

    Here is the quick css code you gave me The first block is what make the logo not centered.

    .html_header_top.html_logo_center .logo {
    top: -10px;
    left: -4px;
    height: 77px;
    }
    
    @media only screen and (max-width: 1100px) { 
    .html_header_top.html_logo_center .logo {
    top: -10px;
    left: -4px;
    height: 77px;
    }}

    See Second screenshot

    First off is there any conflicting code? Second is there a way to just increase the logo area? When I enter this quick css code things get weird I noticed. Is there way to just increase the logo box? possibly by changing the quick css code or making the logo box larger?

    When I add this code below is when things do not stay centered. Is there something I can add in here to make that happen. Right now it is all the way to the left. If I chane the left to about 300 it will go center but it does not adjust when I minimize the browser and overlaps the menu.

    .html_header_top.html_logo_center .logo {
    top: -10px;
    left: -4px;
    height: 77px;
    }

    Thanks for helping me with this! Let me know, like always I plan on rating you high for every license I purchase :)

    #731666

    Hi,

    you can check which code is causing any issues by removing every code one by one until you find the one which is causing it.

    Best regards,
    Andy

    #731690

    hi,

    So i think I found the code that I need to just increase the logo on this thread

    .logo img {
    height: 200px;
    width: 300px;
    }

    This seems to work.

    #732329

    Hi,

    glad you found it!

    Let us know in a new ticket if you have some more questions about our theme. We’re happy to support you.

    Best regards,
    Andy

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