AshwinG

Use this CSS
[data-folder="root"]>.header-menu-nav-folder-content { justify-content: flex-start; }  

Hi,
Try the above from another poster tuanphan...the CSS works well for me

Add to Design > Custom CSS
/* link hover color */ #page a:hover { color: violet; }  

Edit second code to this
a:hover, a:hover span { font-weight: bold; color: #5fb6e4 !important; }  

Suppose you have 2 sections in Footer.
To hide Second section on desktop, use this CSS code
/* desktop */ @media screen and (min-width:992px) { footer.sections section:nth-child(2) { display: none !important; }} To hide First section on mobile, use this code
/* Mobile */ @media screen and (max-width:991px) { footer.sections section:nth-child(1) { display: none !important; }}  

Replace your code with the following.
body:not( .header--menu-open ) [ data-header-style="solid" ].header .header-nav-wrapper .header-nav-item--external a {   color : #000;   font-weight : bold;      } Let us know how it goes.

Hi guys,
I'd like to change the header height on mobile only.
Website: www.thehomecollective.com.au
pword: Torquay1!
 
I have this code for header height on desktop:
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 1.5vw !important;
    padding-bottom: 1.5vw !important;
}
 
Thanks.

Add this code under
@media screen and (max-width:767px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 2vw !important; padding-bottom: 2vw !important; } }  

This code worked perfectly and didn't crop images even if they weren't the same size.
 
.gallery-reel-item img {
    transform: scale(.9);
}

Hi, i'm not a developer or anything but I think I've found my own personal solution i'd like to share with you. Only because it took me hours of trial and error to find the right soultion.
Basically, from what I can tell. 7.1 is using a sort of "container" to hold the images in which it reels through the gallery. Probably changing things like padding might just be changing the container as opposed to the image size itself. With that being said, trail and error, I figured why not just change the .gallery-reel-item img as opposed to the src or even gallery. Anyways, basically resizing the inner image within gallery-reel-item.
Code found below to what I believe basically resized the inner image a bit to give your images more visual space in between them. If they end up to small then just enlarge the size of the gallery.

 
.gallery-reel-item img { width: 100%; ///change percentage to a smaller value in order to resize height: auto; }  
the height set to auto to allow for scaled transformation. Hopefully this helps.
 

Awesome, it works.
Thank you so much

This requires the business plan or above.
Add the following to Website > Pages > Website Tools > Code Injection > HEADER.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Add element url string random.html to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.
Alternately if you want a site-wide effect add the code to Website > Pages > Website Tools > Code Injection > FOOTER..
Let us know how it goes.

Please see the following.
Let us know how it goes.

The selector needs to be...
const selector = '#block-yui_3_17_2_1_1688984615330_1727 a'; This targets the block and the link in the block so the URL can be replaced.

Perfect, thanks

Add to Design > custom CSS
/* hide nav on scroll */ header#header.shrink nav { visibility: hidden; }  

Add to Home > Design > Custom CSS
/* Add a line to bottom of header */ header#header { border-bottom: 1px solid green; } /* Add a line to top of footer */ footer#footer-sections { border-top: 1px solid green; }  

Add this to these page header
<style> .grid-image { object-fit: contain !important; } .grid-image { padding-bottom: unset !important; } .grid-image-inner-wrapper { position: static !important; } a.grid-item { padding: unset !important; height: auto !important; } </style>  

Awesome, it works. Thank you
Also want to say I've used code you've posted onto other forum posts in the past, thanks for all the great work

Add this CSS
nav.header-menu-nav-list .header-menu-nav-item * { background-image: none !important; text-decoration: none !important; border: none !important; }  

I think Site Header should have this option. You try checking again.
Or add this to Design > Custom CSS
.header-title-nav-wrapper { flex-direction: row-reverse; } .header-title-logo { text-align: center; }  

Add to Home > Design > Custom CSS
.header-nav-wrapper a { background-image: none !important; }  

add to Page Settings > Advanced > Header
<style> .item-pagination {display: none !important;} </style>  

Add to Design > Custom CSS
nav.header-nav-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }