narrative theme - HP top section button position & link

Highlighted
New Member
3 0 0

Hello!

I am using narrative and need to tweak just 2 things before launching my COVID quarantine business! If anyone can help me I would really, really appreciate it. I can't code, but I am very good at following clear instructions :)

1. My first homepage section is Image with text overlay. It displays just a button (no text). I would like to move the button position up, so it displays closer to the top of the image (see in screen capture: over the mustard sweater instead of over the hands and cup).

2. I would like the button action to be scroll to the very next section which is a Rich Text block (see in screen capture "THE EASIEST PREMIUM COFFEE EVER), however Shopify is only letting me link the button to other pages :-/

Many thanks in advance if anyone can help!

–Mustard sweater girl

Screen Shot 2020-06-26 at 5.16.52 PM.png

 

0 Likes
Highlighted
Excursionist
26 1 2

Hi PopularCoffe,

I would be glad to help.

1. You have to add CSS margin-top property to your button.

2. Link the button to ID of the "THE EASIEST PREMIUM COFFEE EVER" section ( href="#section_name")

It would be easier to help if you could provide more info about the shop url?

Cheers,

If you need custom modification on store - contact us
If we were helpful then please Like and Accept Solution .
SkyDream Web
https://skydream.info
0 Likes
Highlighted
New Member
3 0 0
Hi!
Thanks for your reply, so kind :)
I tried entering href="#index-section-rich-text" into the button field on
the left hand side, but that doesn't work (the field doesn't accept it) so
I guess I am understanding you wrong? Maybe there is a way to find the name
of the section that I don't know about?
[image: Screen Shot 2020-06-27 at 2.09.53 PM.png]
Do I add CSS margin-top property somewhere in the code? If so, where?
I can't share the live URL because I have installed payment already
unfortunately
0 Likes
Highlighted
Excursionist
26 1 2

Hi again,

Right-click anywhere on your page, then click on INSPECT and on the right side panel you should search for ID. The ID that you are trying to find is below "<!-- BEGIN content_for_index -->".

image.png


To add CSS margin-top (minus or plus), go to ONLINE STORE page, click on ACTIONS and then EDIT CODE.

In Assets folder create a new file for CSS. Call it custom.css or anything you like.

In that file put the CSS you want for the theme. In this case:

.slideshow__text-container {
 margin-top: -2rem;
}

Now make sure that the theme brings your custom CSS file in after it's own (S)CSS file. 

Go to the Layout and open theme.liquid file.

Scroll down until you see something like: 

 {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
 Right after that line add this:
 
  <!-- CUSTOM CSS -->
  {{ 'custom.css' | asset_url | stylesheet_tag }}
  <!-- END CUSTOM CODE  -->

The first and third lines are comments. The {{ ...}} line is liquid code saying: Bring in this custom.css file and convert it to a URL and make it a special tag. 

Hope that would help!

If you need custom modification on store - contact us
If we were helpful then please Like and Accept Solution .
SkyDream Web
https://skydream.info
0 Likes
Highlighted
New Member
3 0 0
Hi SkyDream,
Thanks a lot for your reply. Sorry for the delay in replying. I have been
waiting to go online as it is easier to discuss that way as you mentioned
earlier! The URL is https://popular.coffee/ :)
I have linked the button but I was not yet able to move the button up. On
some lower res devices it shows floating over the hands, but I need it to
be in the mustard top clear space above the hands on all devices. Your
suggestion makes sense, but I think it perhaps didn't work because the top
section is not a slideshow, it's an image with text overlay?
Thanks again for your kind help!
0 Likes
Highlighted
Excursionist
26 1 2

Hi again,

I am glad to hear I helped. 

Speaking of the button, it is inside a <a> element with a class of .hero__btn

So try to adjust with the following code:

.hero__btn {
 margin-top: -10px;
}

I tested it on my laptop and it's working so please let me know when you try it on yours.

 
If you need custom modification on store - contact us
If we were helpful then please Like and Accept Solution .
SkyDream Web
https://skydream.info
0 Likes