Question

How to Keep Logo/Tagline at Top of Page, Responsive Design

  • 28 September 2021
  • 4 replies
  • 19 views

Hi folks. I’m new to Elementor, so I totally understand if this is a dumb question. I haven’t found an answer despite hours of searching though, so thanks for your patience in advance.

 

I’m trying to create a carousel slider on a test site, with a logo and tagline near the top, along with a menu, etc. My understanding of how to do this is to give the text a higher Z-value, place it below the carousel, then give it a negative margin so it’s superimposed over top of the carousel.

 

The problem I’m having is the text “moves” based on the size of the browser screen. I’m not talking about when I view the site with a mobile vs a desktop - I mean I can see the text float upwards and disappear through the top of the browser window as I drag the browser window in. The image stays where it is, which is great, but I can’t get the text to cooperate.

 

Here’s the preview page: http://www.thesonictemple.ca/site/?preview_id=4&preview_nonce=2d17ccc6d1&preview=true

 

I’ve tried reversing the image and text, but then the text stays in place and I have image-related issues instead. I can’t just render the logo and text into the image because then it wouldn’t be responsive. Is there a way to anchor the logo and text (and other elements potentially) to the top of the page?

 

P.S. I am aware the page has other formatting issues as well, but I believe I know how to resolve them.

 

Thanks again y’all!


4 replies

Userlevel 6
Badge +4

@iancrewe Your question seems to have been unanswered for a while, do you still need help?

Or have you found your answer? If so, please share it here so we can mark your answer as the best one and help others who may run into a similar issue.

Hi Susan, unfortunately no, I have not yet received an answer. Not sure what else to try other than go back to the basics of using Elementor and hope the issue gets mentioned there. If someone could at least suggest some resources around this I could look into, that would be great.

Thanks for checking in.

Userlevel 6
Badge +4

The link you shared cannot be viewed because it’s a preview and we need to be logged into your site to see that.

 

can you try publishing it so it can be viewed (and supply new link)? You can always unpublished it later.

 

and/or taking a video and embedding that so we can see?

Hi Susan,

Wow, can’t believe I didn’t notice that.  This should work: http://www.thesonictemple.ca/site/

I’m not sure how to take a video of my screen, but the text movement issue happens when I click and drag the bottom right corner of the browser window to simulate a smaller screen size. This causes the text to move upwards relative to the image, when I want it to stay where it is.

Thanks for your patience!

Reply