Site logo

Archived topic

Mobile and Tablet Slider issues and extra header on mobile

7 replies · Started by Rachel on April 13, 2021

Viewing posts 1–8 of 8

Having a strange issue with my image carousel on tablet and mobile displays. Instead of showing the arrows it shows this strange calendar type symbol on the left, and it won't show the captions.

I also have an extra grey header on mobile at the very top that doesn't contain anything that I don't know how to get rid of.

Oh ok, I guess the image carousel comes from Elementor then? Would that be correct? I don't have the pro version of Elementor but can try asking them about it.

I am not currently using the secondary navigation but was planning on using it on two specific pages as a way to get to e.g. Photography then have the secondary menu display below the header and page hero to show the different categories for example "Weddings" or "Family sessions" etc. (please see link for example where I have sued this on another website).

Oh ok, I guess the image carousel comes from Elementor then? Would that be correct? I don’t have the pro version of Elementor but can try asking them about it.

It's quite hard to tell what plugin it came from as your site is cached so we can't trace it back through normal means. but since it looks like it was added as an Elementor widget, if it's not the default carousel widget of Elementor, then it must be an extension plugin.

I am not currently using the secondary navigation but was planning on using it on two specific pages as a way to get to e.g. Photography then have the secondary menu display below the header and page hero to show the different categories for example “Weddings” or “Family sessions” etc. (please see link for example where I have sued this on another website).

As Leo mentioned, it's the secondary navigation.

See inspection here: https://share.getcloudapp.com/QwuEb1Z2

Is it still showing up even after disabling the module?

I don't have any additional carousel slider plugins. Do you happen to know what might fix the display issues on mobile?

Ok so I would still like to be able to use the secondary nav just like it's being used on the other site example I gave you. On that example it works just on certain pages and doesn't have the extra grey bar at the top. How can I stop this grey bar from displaying on mobile?

Thank you for your help

I don’t have any additional carousel slider plugins. Do you happen to know what might fix the display issues on mobile?

Not exactly sure but it looks like a conflict w/ the font icons used. Are your plugins updated? Make sure it's updated. You can try disabling or purging the cache as well.

Ok so I would still like to be able to use the secondary nav just like it’s being used on the other site example I gave you. On that example it works just on certain pages and doesn’t have the extra grey bar at the top. How can I stop this grey bar from displaying on mobile?

On your other example, the secondary navigation is actually visible on mobile as well.

The only difference between the two is Navigation Location set on Appearance > Customize > Layout > Secondary Navigation. https://share.getcloudapp.com/jkuLYGgg

The site you're currently working on seems to have its Navigation Location set to "Above Header" while your other example is set to "Below header".

Now, if you wish to hide it on mobile, we can do it with custom CSS:

@media(max-width:768px){
    nav#secondary-navigation {
        display: none;
    }
}

Ok that's very helpful thank you I will look into the font icons.

Ah that's what it is. Ok I have fixed the secondary nav issue within Customise, thank you for pointing me in the right direction!

No problem. Glad to be of any help. :)

This archived topic is closed to new replies.