Debut Theme Help - Image with Text Overlay\Header Menu buttons

Highlighted
Tourist
5 0 0

Hello,

 

I'm trying to do 2 things with my store:

1. Make the whole Image with Text Overlay clickable to my products.

2. Make the top menu buttons become bold when I hover over them and stay bold when I click on them (instead of underline).

 

Thank you very much for anyone willing to help :)Capture.JPG

 

0 Likes
Highlighted

Hello ,
Please share yourn site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
1381 111 206

Please share a store url to better assist

0 Likes
Highlighted
New Member
1 0 0

The Flex theme includes a highly versatile Image with Text Overlay section that is perfect to show off stunning banner images. While this section is most often seen at the top of a homepage, it can be used throughout the homepage to display eye-catching images. In the 'Image with Text Overlay' section, you can add text and buttons on top of the images as well - so it's important to avoid using any images that can be distracting! You can adjust the horizontal and vertical position and text alignment as well, so it can be helpful choosing an image that has some negative space in it so you can position the text accordingly. Custom CSS and mobile-specific layout options can be included in this section as well for further configuration, and you can upload a mobile-specific image as well. 

In order to set up the Image with Text Overlay section, click into Customize (your Theme Editor) > Sections > Add Section > Image with Text Overlay.

 

Image with Text Overlay Settings

The 'Image with Text Overlay' section settings determines the look and layout of this section! The settings are divided into the following areas: image, text, text background, buttons, mobile, layout, and advanced.

0 Likes
Highlighted
Tourist
5 0 0

Hi,

 

Thank you for you help.

This is my link: https://6n6u73xvdwijqnlt-27425931298.shopifypreview.com

 

Just to clarify: I would like the Image with Text Overlay to be clickable and appoint to "My Products"

 

0 Likes
Highlighted
Tourist
5 0 0

Hi,

 

Thank you for you help.

This is my link: https://6n6u73xvdwijqnlt-27425931298.shopifypreview.com

 

Just to clarify: I would like the Image with Text Overlay to be clickable and appoint to "My Products"


@Qualitycheck wrote:

Please share a store url to better assist


 

0 Likes
Highlighted

Hello,

1. Make the whole Image with Text Overlay clickable to my products:-For this You have to customize your code.For link you need to add Schema

 

2.To Make the top menu buttons become bold when  hover over them and stay bold when  click on them (instead of underline) :

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#SiteNav .site-nav__link:hover {
	font-weight: 700;
}
#SiteNav .site-nav__label {
	border-bottom: none;
}

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
5 0 0

Hi, thank you for the help with the top menu buttons, worked perfectly.

About the image, I didn't understand what you mean. 

Can you help me with the code to make the image clickable? Or maybe direct me to where I can add <a href>?


@oscprofessional wrote:

Hello,

1. Make the whole Image with Text Overlay clickable to my products:-For this You have to customize your code.For link you need to add Schema

 

2.To Make the top menu buttons become bold when  hover over them and stay bold when  click on them (instead of underline) :

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#SiteNav .site-nav__link:hover {
	font-weight: 700;
}
#SiteNav .site-nav__label {
	border-bottom: none;
}

 

 


 

0 Likes
Highlighted
Tourist
4 0 1

Hey man! I had a problem with this for 3 days and I spent hours searching for it. I paid a guy 15 dollars for this knowledge and I learnt it very well.  
I made steps on how to make clickable image, and note that the button will be used as a link.

 

1,Open hero.liquid and find the code below

 

<img class="hero-fixed-width__image lazyload lazypreload"
src="{{ section.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">

 

2, replace the code entirely with the code 

 

<a href="{{ section.settings.button_link }}">
<img class="hero-fixed-width__image lazyload lazypreload"
src="{{ section.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">
</a>

 

3,open theme.scss.liquid

 

4 put this code in bottom

 

.hero-fixed-width a{
z-index: 9999999;
position: relative;display:block;}

You are well off! if you have a question ask me, I want to help others and I want to teach others to learn.

0 Likes
Highlighted
New Member
3 0 0

I tried this and I am still struggling to get the image to be clickable. Can you help to see what I am missing? What do I need to provide you to be able to see?

0 Likes