Okay
  Public Ticket #3024576
Mobile Logo Position
Closed

Comments

  •  2
    jacobsco started the conversation
    April 14, 2022 at 2:28pm

    Hi, 

    Can you provide guidance on how to control the mobile logo position? My Logo is not vertically centered in the navigation on mobile, but closer to the top of the browser instead of in alignment with the menu. 

    Not sure if this is a related issue, but the logo seems to move positions on different pages. It drops down to be correct on "Services" and "About" but moves higher up on all the other pages. But it's also tiny randomly on the Services page. Since it's changing per page I'm not sure what setting could be controlling it. 

    Thanks!

  •  1,644
    Judith replied
    April 14, 2022 at 5:05pm

    Hi Jacob,

    Please try this css:

    @media only screen and (min-width: 1px) and (max-width: 999px){
    #header-outer #top #logo img, #header-outer[data-transparent-header=true][data-permanent-transparent=false] #logo .dark-version, .full-width-section, body[data-bg-header=true] .full-width-content.first-section, body[data-bg-header=true] .full-width-section.first-section, body[data-header-resize="0"] .container-wrap .portfolio-filters-inline.first-section {
           margin-left: 86px;
    }
}

    Thanks.

  •  2
    jacobsco replied
    April 14, 2022 at 5:12pm

    Hi Judith, 

    That appears to change the left-hand margin, the issue is vertical though -- how close it is to the top of the browser screen, sitting higher up than the hamburger menu. 

    I tried to reword from margin-left to margin-top but that didn't work. Let me know if there's a better phrasing. 



  •  1,644
    Judith replied
    April 14, 2022 at 5:51pm

    Hi Jacob,

    Please try this css:

    @media only screen and (min-width: 1px) and (max-width: 999px){
    #header-outer #top #logo img, #header-outer[data-transparent-header=true][data-permanent-transparent=false] #logo .dark-version, .full-width-section, body[data-bg-header=true] .full-width-content.first-section, body[data-bg-header=true] .full-width-section.first-section, body[data-header-resize="0"] .container-wrap .portfolio-filters-inline.first-section {
        margin-top: 22px!important;
    }
}

    Thanks.

  • Brandon Conn replied
    July 20, 2022 at 2:53pm

    Same issue here. I tried the most recent CSS on this thread and it fixed the transparent logo (but added a white bar at the top) but it broke the main logo that comes up after you scroll. That one has been correct. It's only the initial logo that loads with my transparent page that is wrong. You can see in my screen shots how the transparent is shifted up but the other is correct. (my screenshots are without the CSS added)

    https://www.relevantchurch.cc

    Attached files:  IMG_2453.PNG
      IMG_2452.PNG

  •  8,403
    Tahir replied
    July 20, 2022 at 2:57pm

    Hey Brandon,

    Could you provide the page url so we can provide the CSS as per your setup.

    Thanks 

    ThemeNectar Support Team 

  • Brandon Conn replied
    July 20, 2022 at 2:59pm

    Also, it's only mobile where there are issues

  •  8,403
    Tahir replied
    July 20, 2022 at 3:07pm

    Hey Again,

    Please make sure the Mobile Only Logo is the same Height as the other logos as its likely causing the issue.

    Thanks 

    ThemeNectar Support Team 

  • Brandon Conn replied
    July 20, 2022 at 3:08pm

    It is. Desktop version loads correct. And it worked well before I upgraded salient theme. 

  •  8,403
    Tahir replied
    July 20, 2022 at 3:21pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1px) and (max-width: 999px) {
    #header-outer #top #logo img, #header-outer[data-transparent-header=true][data-permanent-transparent=false] #logo .dark-version {
        top: 10px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • Brandon Conn replied
    July 20, 2022 at 3:23pm

    I tried removing the mobile only versions and that didn't fix. Loads the same way. The mobile only I was just selecting existing logo. They are all the same (color changes only) just at different resolutions to account for retina screens. 

  •  8,403
    Tahir replied
    July 20, 2022 at 3:27pm

    Can you confirm if the aspect ratios are the same ?. Also create a new ticket with your login credentials so we can respond accordingly.

    Thanks 

    ThemeNectar Support Team 

  • Brandon Conn replied
    July 20, 2022 at 3:35pm

    I can start a new thread. Just saw your CSS and tried it. It fixes the transparent perfectly but messes up the normal menu. See screenshot. 

    Attached files:  IMG_9F3349939AB8-1.jpeg

  • Brandon Conn replied
    July 20, 2022 at 3:39pm

    Also, aspect ratios are the same. 

  •  8,403
    Tahir replied
    July 20, 2022 at 3:41pm

    Please create a new thread so we can login and check.

    Thanks 

    ThemeNectar Support Team