Dawn Theme - Image banner issue

[ARTLOUNGE]

Hi,

I am using dawn theme and have the below image banner, I have also added the below custom css as it wasn't appearing correctly on the mobile version or desktop, however, now the content text and button don't show correctly. How can I fix this? 

.banner {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16/9;
}

.banner__media {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

.banner__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 2;
}

https://www.the-artlounge.com/ - password nagco

[Supporter]

Open the css and replace it with this 

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.banner__content {
  position: relative; /* Changed from absolute */
  text-align: center;
  color: white;
  z-index: 2;
  padding: 20px;
  max-width: 90%; /* Prevent content from touching edges */
}

/* Add contrast for better text visibility */
.banner__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Optional overlay for better text visibility */
  z-index: -1;
}

/* Media query for mobile devices */
@media screen and (max-width: 749px) {
  .banner {
    aspect-ratio: 1/1; /* Optional: different aspect ratio for mobile */
  }
  
  .banner__content {
    padding: 15px;
    max-width: 95%;
  }
}

and tell if it works for you

[ARTLOUNGE]

@Supporter  - thanks for the response, however, I get the below error - 

Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes.

[Supporter]

No add this in theme if you don't know about that you can add me i can do it for you.

[Supporter]

Please try this i have updated the code for better results 

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.banner__content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 2;
  padding: 40px 20px;
  max-width: 1200px;
  width: 100%;
}

.banner__heading {
  margin-bottom: 1.5rem;
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 600;
}

.banner__text {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

.banner .button {
  min-width: 160px;
  padding: 15px 30px;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Optional overlay for better text visibility */
.banner__content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Tablet styles */
@media screen and (max-width: 990px) {
  .banner {
    aspect-ratio: 2/1;
  }

  .banner__heading {
    font-size: 2.4rem;
  }

  .banner__text {
    font-size: 1.4rem;
  }
}

/* Mobile styles */
@media screen and (max-width: 749px) {
  .banner {
    aspect-ratio: 3/2;
  }

  .banner__content {
    padding: 20px 15px;
    width: 90%;
  }

  .banner__heading {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .banner__text {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .banner .button {
    min-width: 140px;
    padding: 12px 24px;
    font-size: 1.2rem;
  }
}

/* Optional: Add animation for content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner__content > * {
  animation: fadeInUp 0.8s ease-out forwards;
}

[Supporter]

add it theme code editor

[ARTLOUNGE]

@Supporter - am I adding this into the section-image-banner.css? if so, I tried that by replacing what is in there with what you gave me and it doesnt appear to work correctly 

I replaced the below in section-image-banner.css, I also removed the custom css from section on the page as well but it didnt fit the whole page as it currently does and the container was visible even though the container wasn't selected to show on the page. It also removed the overlay. 

How can I give you access to have a look at this? Thanks for your help.

.banner {
display: flex;
position: relative;
flex-direction: column;
z-index: auto;
isolation: isolate;
}

.banner__box {
text-align: center;
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.banner__box.gradient {
transform: perspective(0);
}

@media only screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__box {
text-align: right;
}

.banner--content-align-mobile-left .banner__box {
text-align: left;
}
}

@media only screen and (min-width: 750px) {
.banner--content-align-right .banner__box {
text-align: right;
}

.banner--content-align-left .banner__box {
text-align: left;
}

.banner--content-align-left.banner--desktop-transparent .banner__box,
.banner--content-align-right.banner--desktop-transparent .banner__box,
.banner--medium.banner--desktop-transparent .banner__box {
max-width: 68rem;
}
}

.banner__media.animate--zoom-in {
clip-path: inset(0px);
}

.banner__media.animate--zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
.banner__media.animate--zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
position: fixed;
height: 100vh;
}

@media screen and (max-width: 749px) {
.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 28rem;
}

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 34rem;
}

.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 39rem;
}

.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 28rem;
}

.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 34rem;
}

.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 39rem;
}
}

@media screen and (min-width: 750px) {
.banner {
flex-direction: row;
}

.banner--small:not(.banner--adapt) {
min-height: 42rem;
}

.banner--medium:not(.banner--adapt) {
min-height: 56rem;
}

.banner--large:not(.banner--adapt) {
min-height: 72rem;
}

.banner__content.banner__content--top-left {
align-items: flex-start;
justify-content: flex-start;
}

.banner__content.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}

.banner__content.banner__content--top-right {
align-items: flex-start;
justify-content: flex-end;
}

.banner__content.banner__content--middle-left {
align-items: center;
justify-content: flex-start;
}

.banner__content.banner__content--middle-center {
align-items: center;
justify-content: center;
}

.banner__content.banner__content--middle-right {
align-items: center;
justify-content: flex-end;
}

.banner__content.banner__content--bottom-left {
align-items: flex-end;
justify-content: flex-start;
}

.banner__content.banner__content--bottom-center {
align-items: flex-end;
justify-content: center;
}

.banner__content.banner__content--bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}

@media screen and (max-width: 749px) {
.banner:not(.banner--stacked) {
flex-direction: row;
flex-wrap: wrap;
}

.banner--stacked {
height: auto;
}

.banner--stacked .banner__media {
flex-direction: column;
}
}

.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

.banner__media-half {
width: 50%;
}

.banner__media-half + .banner__media-half {
right: 0;
left: auto;
}

.banner__media-half.animate--fixed:first-child > img,
.banner__media-half.animate--zoom-in:first-child > img {
width: 50%;
}

.banner__media-half.animate--fixed:nth-child(2) > img,
.banner__media-half.animate--zoom-in:nth-child(2) > img {
left: 50%;
width: 50%;
}

@media screen and (max-width: 749px) {
.banner--stacked .animate--fixed:first-child > img,
.banner--stacked .animate--zoom-in:first-child > img {
width: 100%;
}

.banner--stacked .banner__media-half.animate--fixed:nth-child(2) > img,
.banner--stacked .banner__media-half.animate--zoom-in:nth-child(2) > img {
left: 0;
width: 100%;
}

.banner--stacked .banner__media-half {
width: 100%;
}

.banner--stacked .banner__media-half + .banner__media-half {
order: 1;
}
}

@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}

.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
height: auto;
}

@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__media,
.banner--stacked:not(.banner--mobile-bottom) .banner__media {
position: relative;
}

.banner--stacked.banner--adapt .banner__content {
height: auto;
}

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
background: transparent;
}

.banner:not(.banner--mobile-bottom) .banner__box {
border: none;
border-radius: 0;
box-shadow: none;
}

.banner:not(.banner--mobile-bottom) .button--secondary {
--alpha-button-background: 0;
}

.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
position: absolute;
height: auto;
}

.banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
max-height: 100%;
overflow: hidden;
position: absolute;
}

.banner--stacked:not(.banner--adapt) .banner__media {
position: relative;
}

.banner::before {
display: none !important;
}

.banner--stacked .banner__media-image-half {
width: 100%;
}
}

.banner__content {
padding: 0;
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
z-index: 2;
}

@media screen and (min-width: 750px) {
.banner__content {
padding: 5rem;
}

.banner__content--top-left {
align-items: flex-start;
justify-content: flex-start;
}

.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}

.banner__content--top-right {
align-items: flex-start;
justify-content: flex-end;
}

.banner__content--middle-left {
align-items: center;
justify-content: flex-start;
}

.banner__content--middle-center {
align-items: center;
justify-content: center;
}

.banner__content--middle-right {
align-items: center;
justify-content: flex-end;
}

.banner__content--bottom-left {
align-items: flex-end;
justify-content: flex-start;
}

.banner__content--bottom-center {
align-items: flex-end;
justify-content: center;
}

.banner__content--bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}

@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
order: 2;
}

.banner:not(.banner--mobile-bottom) .field__input,
.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
background: transparent;
}
}

.banner__box {
padding: 4rem 1.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
word-wrap: break-word;
z-index: 1;
}

.banner--mobile-bottom .banner__box {
padding: 4rem 3.5rem;
}

@media screen and (min-width: 750px) {
.banner__box {
padding: 4rem 3.5rem;
}

.banner--desktop-transparent .banner__box {
padding: 4rem 0;
background: transparent;
max-width: 89rem;
border: none;
border-radius: 0;
box-shadow: none;
}

.banner--desktop-transparent .button--secondary {
--alpha-button-background: 0;
}

.banner--desktop-transparent .content-container:after {
display: none;
}
}

@media screen and (max-width: 749px) {
.banner--mobile-bottom::after,
.banner--mobile-bottom .banner__media::after {
display: none;
}
}

.banner::after,
.banner__media::after {
content: '';
position: absolute;
top: 0;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}

.banner__box > * + .banner__text {
margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
.banner__box > * + .banner__text {
margin-top: 2rem;
}
}

.banner__box > * + * {
margin-top: 1rem;
}

.banner__box > *:first-child {
margin-top: 0;
}

@media screen and (max-width: 749px) {
.banner--stacked .banner__box {
width: 100%;
}
}

@media screen and (min-width: 750px) {
.banner__box {
width: auto;
max-width: 71rem;
min-width: 45rem;
}
}

@media screen and (min-width: 1400px) {
.banner__box {
max-width: 90rem;
}
}

.banner__heading {
margin-bottom: 0;
}

.banner__box .banner__heading + * {
margin-top: 1rem;
}

.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}

@media screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__buttons--multiple {
justify-content: flex-end;
}

.banner--content-align-mobile-center .banner__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}
}

@media screen and (min-width: 750px) {
.banner--content-align-center .banner__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}

.banner--content-align-right .banner__buttons--multiple {
justify-content: flex-end;
}
}

.banner__box > * + .banner__buttons {
margin-top: 2rem;
}

@media screen and (max-width: 749px) {
.banner:not(.slideshow) .rte a,
.banner:not(.slideshow) .inline-richtext a:hover,
.banner:not(.slideshow) .rte a:hover {
color: currentColor;
}
}

@media screen and (min-width: 750px) {
.banner--desktop-transparent .rte a,
.banner--desktop-transparent .inline-richtext a:hover,
.banner--desktop-transparent .rte a:hover {
color: currentColor;
}
}

[Supporter]

You can add my as a collaborator in your and i try to solve your issue 

[ARTLOUNGE]

@Supporter I would need your email to add you, or you can use collaborator code 2667

[Supporter]

accept it

[ARTLOUNGE]

accepted, thanks

[Supporter]

wait working on it

[Supporter]

can you tell me how you want the banner to show

[ARTLOUNGE]

the banner should display on the desktop version as it currently is, but the content (text and button) should appear in the middle of the banner image. On mobile, it should appear the same, full screen, behind the nav menu and button/text in the middle. 

[ARTLOUNGE]

@Supporter - see images, this is how it should appear on desktop, so looks ok to me, however, on mobile, the content text/button needs moving down slightly as it's too near the logo at the top. 

Also, about us on mobile, the footer appears behind the image banner, no idea why either! thanks for your help. 

[Supporter]

@ARTLOUNGE  Check the mobile Now is it Ok or Not.

[Supporter]

Also check the about us is it ok Now

[ARTLOUNGE]

looks good to me, yes. Thanks for that, what was the issue so I know going forward? 

I will want to move the banner content slightly upwards for mobile, so I just want to know for my information so I can update as there is a big gap.

Really appreciate the help

[Supporter]

The issue is in your theme code file in the section-image-banner.css i just add some styling and reduce your font size on mobile 

@media screen and (max-width: 749px) {
.banner--stacked .banner__box {
width: 100%;
}
.banner__box > *:first-child {
margin-top: 15vh;
font-size:30px;
}

the changes are underlined and i dont understand what issue is in about page because on my mobile it is ok. Please reload the site and then tell me
}

[ARTLOUNGE]

thanks, on my mobile it looks fine, its just how its displaying in shopify. 

Do you know of a way that I can make the active nav menu item a different colour? I did have code in for this, but for some reason its stopped working. I wanted the active menu colour to be F3B60E for both desktop and mobile. 

Thanks a bunch

[Supporter]

Ok let me see

[Supporter]

Do you added code for active class by yourself?

[ARTLOUNGE]

yes, I added in some code to apply what I am trying to do now, I believe in the header.liquid - I could be wrong though. 

I also had for my index/homepage and about us, some code added in there which made the menu have a background on scroll but this also appears to have broken as when scrolling no background is applied

[Supporter]

Can you remove your code that you have added so that i can solve your issue its difficult to understand where you have added your code due to which you r and shopify classes are colliding with each other.

[ARTLOUNGE]

I remove the below from header.liquid and it should now show the menu header in default colours, however, the header is no longer transparent for homepage and about us

{% if template.name == 'index' or request.path contains '/about-us' %}
<style>
/* Apply styles for transparent header across all devices */
.header-wrapper {
position: absolute;
width: 100%;
background: transparent;
color: white;
}

/* Ensure text and icons are visible on the transparent background */
.header-wrapper .list-menu span,
details[open] > .header__menu-item,
.header-wrapper summary svg,
.header-wrapper a svg,
.header-wrapper h1.header__heading span.h2,
.header-wrapper details > span,
.header-wrapper .disclosure__button > span,
.header-wrapper .disclosure__button svg {
color: white !important;
}

/* Active menu item styling */
.header-wrapper .header__menu-item--active {
color: #F3B60E;
font-weight: bold; /* Optional for emphasis */
text-decoration: underline; /* Optional to make it more noticeable */
}

/* Hover effect for menu items */
.header-wrapper .list-menu span:hover,
.header-wrapper .list-menu .header__menu-item:hover {
color: rgba(243, 182, 14, 0.8); /* Hover effect */
}

/* Add a subtle border to the header if needed */
.header-wrapper--border-bottom {
border-bottom: .1rem solid rgba(255, 255, 255, .08);
}

/* Maintain proper spacing and alignment */
.section-header {
margin-bottom: 0;
}
</style>
{% endif %}

[Supporter]

Good now just tell me what stylings you want in the navbar in points 

[ARTLOUNGE]

I am happy with how it is working except for the below - 

1. Highlighting over Sale changes the colour from red to yellow and its the same when selected. However, I would want to to remain red. 
2. I want the header to be transparent, however, show when scrolling so the menu items can be seen clearly. 

[Supporter]

Check the navbar now

[ARTLOUNGE]

doesnt work correctly unfortunately, its being applied to all pages, instead of just the index/homepage and the about us, and the navbar moves half way down the middle of the screen when scrolling.

What was updated? 

[Supporter]

You are saying that you want to change the navbar styling of three pages not all right?

[ARTLOUNGE]

the transparent navbar, should only be applied to the homepage and about us. the navbar should then show on scroll. Can you advise what you're updating for this functionality please?

[Supporter]

Yeah i can tell you i just change your base.css file 

by adding this 

.header-wrapper {
background: transparent;
position: fixed;
width: 100%;
z-index: 100;
transition: background-color 0.3s ease;
}

.header-wrapper.scrolled {
background: black;
}

and by adding java to your landing page 

document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.header-wrapper');
const scrollThreshold = 50; // Change this value to adjust when the background appears

window.addEventListener('scroll', function() {
if (window.scrollY > scrollThreshold) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
});

[Supporter]

so you want to change the navbar for only two pages

[ARTLOUNGE]

yes correct, it was previously applied using the below 

{% if template.name == 'index' or request.path contains '/about-us' %}

[Supporter]

Ok sorry here on my side it is like 2 pm. I can correct these changes tomorrow for you.

If you like my help you can support me i am collecting my college fee thanks. https://buymeacoffee.com/webcraftio