Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 3, 2023 at 12:12 am #1396468
    MaskiMichener

    Hello,

    We are experiencing a few issues on our Header with a custom child theme.
    1. On mobile/tablet the logo on the left is duplicated and overlapping;
    2. the Header Secondary Menu is not showing in full;

    the custom Footer is also giving us issues on mobile:
    1. we have a Page set as the footer, and a portion of it is not showing on mobile/tablets (the extra internal links that are seen on the desktop version)
    2. the sponsor’s logos are not centered on the screen on mobile and have a weird gap on the desktop version between them we cannot remove

    As the majority of our users are on mobile, we need to have these issues fixed – is there a workaround for these issues, or can someone log into the system and help us on the back end?
    Thank you

    February 3, 2023 at 9:29 am #1396518
    Ismael

    Hey MaskiMichener,

    Thank you for the inquiry.

    1.) Looks like the alternate logo is still displaying on mobile view. To remove it, you can add this css code.

    @media only screen and (max-width: 767px) {
	/* Add your Mobile Styles here */
	.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img,
	.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
		opacity: 0;
	}
}

    2.) Would you mind providing a screenshot of the issue? You can use imgur, savvyify or dropbox for the screenshot.

    Best regards,
    Ismael

    February 3, 2023 at 11:18 pm #1396611
    MaskiMichener

    The code worked, thank you – now the header on mobile is sticky, is there a way to make is stay at the top of the screen instead of showing the gap (visible gap above the menu in the screenshot): https://img.savvyify.com/image/mdKt

    Here is the screenshot showing the difference between mobile/tablet and desktop where the link highlighted in black on desktop view is not showing on mobile/tablet view: https://img.savvyify.com/image/mMky

    and here is a screenshot of the weird spaces on the sponsorship logo section that we cannot seem to fix:
    desktop: https://img.savvyify.com/image/mYGn
    mobile/tablet: https://img.savvyify.com/image/mRfd

    February 6, 2023 at 3:46 pm #1396849
    Yigit

    Hi,

    now the header on mobile is sticky, is there a way to make is stay at the top of the screen instead of showing the gap

    Please add the following code to the bottom of the Quick CSS field

    
  @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
  top: 0;
}
}

    Here is the screenshot showing the difference between mobile/tablet and desktop where the link highlighted in black on desktop view is not showing on mobile/tablet view

    That is because of the following CSS code you have in the Style.css file of your child theme on line 788

    
  @media only screen and (min-width: 320px) and (max-width: 1024px){ 
#footer-page .footer-mid .container .content .entry-content-wrapper .links {
  display: none;
}
}

    and here is a screenshot of the weird spaces on the sponsorship logo section that we cannot seem to fix:

    Please add following code to bottom of Quick CSS field

    
  @media only screen and (max-width: 479px) {
.flex_column.av-68c1a-f57ab0462383c8166f971642bc679437,
.flex_column.av-2awr6-825dd88a428addaf3113f5c371dcb877 {
  right: 0;
  left: 0;
}
}

    and remove the following code from the style.css file of your child theme

    
  @media only screen and (min-width: 320px) and (max-width: 767px) {
#footer-page .footer-top .container .content {
  padding: 50px 0 0 0;
    padding-left: 0px;
}}

    Best regards,
    Yigit

    February 8, 2023 at 11:23 pm #1397238
    MaskiMichener

    Hello Yigit,

    The solutions for the Header worked – however the solutions for the footer did not.
    Is someone able to log into the system and modify the code directly?

    Thank you

    February 10, 2023 at 7:22 am #1397391
    Ismael

    Hi,

    We added this css code to remove the space between the logo elements.

    .av-68c1a-f57ab0462383c8166f971642bc679437 {
   margin-top: 0 !important;
}

    Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

    February 13, 2023 at 8:07 pm #1397818
    MaskiMichener

    Hello Ismael,

    The gap is still showing on our end, after a few days of clearing cache’s, checking numerous devices, etc. etc. I am attaching a screenshot of it with my pen showing the gap.

    https://img.savvyify.com/image/nzN1

    February 14, 2023 at 2:14 pm #1397920
    Yigit

    Hi,

    You have following code in /enfold-child/dist/style.css file

    
        #footer-page .footer-top .container .content .entry-content-wrapper .icon-row {
  padding: 0;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 100px;
}

    I commented top margin value as following

    
        #footer-page .footer-top .container .content .entry-content-wrapper .icon-row {
  padding: 0;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
/*  margin-top: 100px; */
}

    I attached a screenshot in private content field to show how it looks on my end after the changes.

    Please review your website :)

    Best regards,
    Yigit

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