Docs

[belayachimarouane]

Hello,

In my website, I am trying to implement a down arrow in each section (like the one in the masthead).
I tried to do it with CSS but it gets hidden is small screen maybe because of my misconfiguration of it. (it needs to be on the top of the other elements of the section.

My question is : Is is possible to solve it with CSS ?
Is there anyway to automate it with JS ? And the arrow will jump to next section (section”+i”) ?

Website : http://www.garcondusiecle.com

Thanks a lot!

[Christian]

Hey there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. Thanks for understanding. Take care!

[belayachimarouane]

Well, I thought it’s within X theme features since I am only using elements from x Theme and was wondering if it’s possible to overlay two rows and keep a row always at the bottom of a section no matter the screen size.

Thanks anyway!

[Rupok]

Hi there,

Thanks for updating. Would you clarify your issue a bit that which button you are referring that’s hidden on mobile? Are you referring this? – http://prntscr.com/b1ozv1

If yes then you need to create proper spacing with margin/padding for this button so that it won’t overlap with content.

You can follow this to create similar scroll down button for your site – https://community.theme.co/forums/topic/create-circle-down-button/#post-913884

Cheers!

[belayachimarouane]

Yes, actually I am referring to that button but not for mobile just for small laptop screens like a netbook.. It gets hidden with below the next section simply because it’s a div that overlays the other elements of the section.

The thread you sent me is very interesting, however I want the text element to overlay the section!

I used this to do it :

.cs-ta-center {
   text-align: center !important;
   bottom: -50px;
   position: absolute;
    
}

But I don’t think it’s a good idea to do so…

[Rupok]

Hi there,

Thanks for writing back. As mentioned earlier you should create some space for the button so that it can site there without overlapping. And you have some odd styling that you shouldn’t use :

.secs {
  height: 92vh !important;
}

Let use the usual structure (with padding/margin for the section) to get expected result. Unfortunately these issues are related to your customization so we couldn’t help much but point you the issue.

Cheers!

[belayachimarouane]

Well, since there is no full height column I was obliged to to the 92vh height. I don’t know if there is any other solution for full height section!

Thanks a lot!

[John Ezra]

Hi there,

Thanks for updating the thread! It seems you have found a way to get this to work somehow? Are you still needing any help with this? Do let us know – thanks!

[belayachimarouane]

Hello! I have played with some CSS and it seems to be working!

Thanks a lot!

[Thai]

If you need anything else please let us know.

[Author]

Posts