Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 5, 2019 at 1:53 pm #1074869
    March 5, 2019 at 1:54 pm #1074871
    adaptiveseosolutions

    Help would be awesome thanks!

    March 6, 2019 at 7:58 am #1075357
    Nikko

    Hi adaptiveseosolutions,

    Can you give us a link to your site? so we can try to inspect it and check further.

    Best regards,
    Nikko

    March 8, 2019 at 11:42 am #1076294
    adaptiveseosolutions

    Welcome

    I would like to make the logo bigger in size as well as have the logo appear above the top header (in front of it) so the logo is showing completely.

    Can this be done?

    March 8, 2019 at 11:44 am #1076297
    adaptiveseosolutions
    This reply has been marked as private.
    March 12, 2019 at 5:39 am #1077636
    Nikko

    Hi adaptiveseosolutions,

    Thanks, can you try adding this css code in Quick CSS, located in Enfold > General Styling:

    #header .logo {
    overflow: visible;
}

#header .logo a, 
#header .logo img {
    min-height: 150px;
}

@media only screen and (max-width:767px) {
  #header .logo a, #header .logo img {
    min-height: 80px !important;
  }
}

    Best regards,
    Nikko

    March 21, 2019 at 7:21 am #1081202
    adaptiveseosolutions

    Hi there, I have added the code and that has made it a bit nicer on mobile but I still want some changes on the desktop.
    I would like the logo to appear slightly in the top header as well. Also I would like if the top header did not disappear on desktop when you scroll down.

    It is important we keep the logo looking nice but also within the top header as well and visible.

    Website

    March 21, 2019 at 2:23 pm #1081403
    Nikko

    Hi adaptiveseosolutions,

    Try adding this code as well:

    #top #header #header_main {
    z-index: 11;
}

#header .logo {
    margin-top: -15px;
}

    Best regards,
    Nikko

    March 27, 2019 at 1:42 am #1083331
    adaptiveseosolutions

    Thanks that got the logo to move up slightly into the top header. This is my current coding for everything. What can I alter to make my logo even bigger JUST on desktop?

    .logo ,.logo a,.logo img {
    min-height: 120px;
    }

    #top .avia-button-fullwidth .av-button-description {
    font-size: 12px; }

    .avia-button-wrap span.avia_iconbox_title {
    font-size: 18px;
    }

    #header .logo {
    overflow: visible;
    }

    #header .logo a,
    #header .logo img {
    min-height: 150px;
    }

    @media only screen and (max-width:767px) {
    #header .logo a, #header .logo img {
    min-height: 80px !important;
    }
    }

    #top #header #header_main {
    z-index: 11;
    }

    #header .logo {
    margin-top: -15px;
    }

    #avia-menu .avia-menu-text {
    font-size: 17px !important;
    font-weight: bold !important;
    }

    Thanks for the reply!

    March 27, 2019 at 5:08 am #1083380
    Nikko

    Hi adaptiveseosolutions,

    You just need to adjust the minimum height in this code:

    .logo ,.logo a,.logo img {
min-height: 120px;
}

    Best regards,
    Nikko

    March 27, 2019 at 1:59 pm #1083600
    adaptiveseosolutions

    The Desktop Logo and header looks good now. But making these changes has affected how the mobile header looks negatively.

    As you can see in this image the green mobile header section isdouble the size of the logo now. How can we fix this so it looks more presentable on mobile without affecting the desktop.

    The website link is below:

    Welcome

    This is my current coding

    .logo ,.logo a,.logo img {
    min-height: 170px;
    }

    #top .avia-button-fullwidth .av-button-description {
    font-size: 12px; }

    .avia-button-wrap span.avia_iconbox_title {
    font-size: 18px;
    }

    #header .logo {
    overflow: visible;
    }

    #header .logo a,
    #header .logo img {
    min-height: 150px;
    }

    @media only screen and (max-width:767px) {
    #header .logo a, #header .logo img {
    min-height: 80px !important;
    }
    }

    #avia-menu .avia-menu-text {
    font-size: 17px !important;
    font-weight: bold !important;
    }

    March 28, 2019 at 5:11 am #1083914
    Nikko

    Hi adaptiveseosolutions,

    Can you try including this code:

    @media only screen and (max-width:767px) {
  #top #header #header_main, 
  #top #header #header_main .av-logo-container, 
  #top #header #header_main .inner-container, 
  #top #header #header_main .logo {
    max-height: 100px;
  }

  #top #header #header_main .logo {
    display: block;
    padding-top: 10px;
  }
}

    Best regards,
    Nikko

    April 10, 2019 at 2:38 am #1088940
    adaptiveseosolutions

    Hi Nikko that did not change the mobile header at all and it still occupies a large amount of space on the phone. Is there a way I can send you the photo that you can see it?

    https://www.dropbox.com/s/sc6yit0mzydfioy/55439737_337128290484262_553679743254265856_n.jpg?dl=0

    I have pasted a link that shows the mobile view on my phone.

    As you can see the green is almost double the size of the actual logo and taking up so much space.

    I would like the green backing to be almost the same height as the logo so it takes minimal space on mobile but does not change how our desktop view is looking.

    Thanks!

    Nathan.

    April 11, 2019 at 5:22 am #1089387
    Nikko

    Hi Nathan,

    Can you try to clear the browser cache? I have checked it with my mobile phone and it looks great (screenshot in private content).

    Best regards,
    Nikko

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