Safaro Header and Footer Issues

Support
#1

Hello again! Below the footer there is white space on safari, and the text on the top most part, after where it says email gets cut off… No other browser has this issue…

#2

Also on mobile on the footer only one comumn is showing… the far left

#3

Hello @Saraswati,

Thanks for writing in!

I have checked the sites associated with your licenses code. I could not be sure where the issue has occurred.

One thing I noticed is that in your one site, the space were coming from the bottom margin of the language selector container. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

#lang_sel_footer {
    margin-bottom: 0;
}

In you other site, there is also a white blank space at the footer. This is the footer widget area which you haven’t set any widgets. If you want to disable this, please go to X > Theme Options > Footer.

Hope this helps.

#4

I am looking at

https://dev.miripiriacademy.org/

Also on mobile the text in the left column isnt all white. Im using the text editor, but for some reason the phone numbers are coming out dark blue? The whole builder seems a bit buggy honestly.

#5

And sorry for this… the website stops scrolling now at the footer since I started using the custom footer. When I scroll down, and wan tto scroll back up it wont do it unless I put my cursor on the actual scroll bar… thats on safari and chrome on a macbook

#6

The top header is not responsive either. Is there setting for this?

#7

Hello @Saraswati,

The given url ask for an authentication code:

Please provide us the site details in a secure note. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

#8

securenote option isnt showing?

#9

Hello @Saraswati,

I have checked your site in safari and it appears that your bar footer has a fixed height of 500 pixel. This will not working in smaller screens. Please create two separate bar settings. One bar will be visible for the desktop screens and the other bar which will have a height of auto could be visible for smaller screens. You can hide/show the bar by utilizing the “Hide During Breakpoints” option which has been explained in detailed here: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

#10

Thank you. I was able to just change it to auto and it works. How do I adjust the header menus to stack for mobile. Does responsiveness not come automatically?

#11

I made a different menu that hides using the same method. Though I dprefer just having the items stack as the screen size changes but Im unsure with some of of how your menu system is set up how to do that even though I coudl do it in CSS

#12

I also keep getting this eror now

‘This element could not render due to invalid template markup. This could be due to changes introduced by a third party plugin. The front end of your site should still’

#13

Hi Saraswati,

You can create a new bar and make that Bar the one that show on mobile view, on that new bar you can make your elements (logo and navigation inline) stack. However, that won’t look good as your navigation inline will get cut off on small screen. So the proper way (and common way) is to have a navigation inline on desktop and have a toggle menu on mobile (like what you have now)

Please check the content of your header and make sure there is no invalid HTML markup in there, you can use this tool for checking HTML markup.

Happy New Year,
Cheers!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.