justinjamesclack

Maybe it's in a code block on the page or each page. 

Otherwise you can target font colour using css in the custom css panel.

So this is very doable and I have done this in a website I've designed for an artist, that wanted 2 websites in one with different links displayed on different parts of the website. 

So the first thing you're going to want to do is change your url name for each page/link. 

You want to change it so that it's something like /en/url-tag or /ice/url-tag so for example;

www.youraddresshere.com/en/about-us        for the English side of the site and then
www.youraddresshere.com/ice/um-okkur     for the Icelandic side of the site. 

Step 2 is going to each page and accessing the page setting > advanced > header code injection. Then you are going to take the following code and place it on all the English pages/links;

<style>
header#header [href*="/ice/"] {
    display: none;
}
</style> 

and then on every Icelandic page/link go to page setting > advanced > header code injection. Then you are going to take the following code and place it on all the Icelandic pages/links;

<style>
header#header [href*="/en/"] {
    display: none;
}
</style> 

If this doesn't work, then you will have to use the code in a code block, and use the /ice/ code on each English page, and the /en/ code on every Icelandic page.

Hi @miketerranova,

If you had multiple dropdown menu's then yes you would have to target the specific dropdown menu.

So depending on where you would like to hide the dropdown menu, is where you should inject the code, using the page settings and the header code injection. 

However, if you want to hide the dropdown menu across the whole site, add the code to the custom css window;



If you want to just inject this code on the home page, open up the page settings for the home page, then navigate to advanced, and then in the header code injection add the code between <style></style> tags, like this;

<style>
.header-nav .header-nav-item--folder {
visibility: hidden !important;
}
</style>

what text's are you trying to trigger? 

For the field title (e.g. Name) you'd target this;
.sqs-async-form-content .form-wrapper .field-list .title {
font-family: 'insert font family' !important;
font-size: 24px !important; //change font size//
font-weight: 500 ; //change bold size//
}

for the caption text (e.g. address 1) you'd target this;
.sqs-async-form-content .form-wrapper .field-list .field .caption {
font-family: 'insert font family' !important;
font-size: 18px !important; //change font size//
font-weight: 500 ; //change bold size//
}

 
For the description (e.g. the grey 'if you have a transponder' text) you'd target this;
.sqs-async-form-content .form-wrapper .field-list .description {
font-family: 'insert font family' !important;
font-size: 24px !important; //change font size//
font-weight: 500 ; //change bold size//
color: #5FB2F7 !important;
}
 
For the button you'd target this;
.sqs-async-form-content .form-wrapper input[type=submit] {
font-family: 'insert font family' !important;
font-size: 24px !important; //change font size//
font-weight: 500 ; //change bold size//
background-color: #5FB2F7 !important;
}
 
You can add a hyperlink to a checkbox, but it will navigate to a different page and you'd have to refill out the information in the form. I am not sure if this is possible but maybe @tuanphan @paul2009 or @Ziggycould answer this more thoroughly.

My apologies, let's try this code instead;

.products.collection-content-wrapper .nested-category-breadcrumb-link {
font-size: 14px !important;
}
 

That will target all respective fonts across the whole site and down to tablet and mobile devices. 

To only target mobile devices, you'd use the media query 

@media only screen and (max-width: 768px) {
    h1, h2, h3, h4 {
        font-family: 'EuclidCircularA-bold';
    }
}
p, .sqsrte-large, .sqsrte-small {
    font-family: 'EuclidCircularA-Regular';
}