Shopify themes, liquid, logos, and UX
I use the Debutify theme and I want my "Image with text overlay" to be also displayed behind the navigation area, but only on the main page. How do I do that?
I tried using Photoshop to illustrate my problem. The first picture is what it looks like at the moment and the second picture shows how I would like it to be.
Solved! Go to the solution
This is an accepted solution.
remove old code and insert this code
.template-index .site-header{
position: relative;
background-color: #b1a9a900 !important;
z-index: 10;
border-bottom: transparent !important;
}
.template-index .drawer-page-content{
position: absolute;
top: 0;
width: 100%;
}
.template-index .site-header .site-header__mobile-nav{
background-color: #b1a9a900 !important;
}
This is an accepted solution.
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-index .site-header .grid #AccessibleNav .site-nav li .site-nav__link .site-nav__label{
color:#ffffff !important
}
.template-index .site-nav__link--active .site-nav__label {
border-bottom-color: #ffffff !important;
}
.template-index .site-header .site-header__icons .site-header__icons-wrapper .site-header__search-toggle .icon-search{
fill:#ffffff !important
}
.template-index .site-header .site-header__icons .site-header__icons-wrapper .site-header__cart .icon-cart{
fill:#ffffff !important
}
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.site-header{
position: relative;
background-color: #b1a9a900 !important;
z-index: 10;
border-bottom: transparent !important;
}
.drawer-page-content{
position: absolute;
top: 0;
width: 100%;
}
Thanks for this solution. The problem is now that the navigation bar is white and not transparent and that you cant see the prices anymore on the other pages for example here https://besi-artwork.myshopify.com/products/simpsons-artwork
This is an accepted solution.
remove old code and insert this code
.template-index .site-header{
position: relative;
background-color: #b1a9a900 !important;
z-index: 10;
border-bottom: transparent !important;
}
.template-index .drawer-page-content{
position: absolute;
top: 0;
width: 100%;
}
.template-index .site-header .site-header__mobile-nav{
background-color: #b1a9a900 !important;
}
Wow its perfect now. Thank you. Can you tell me how to change the text color of the menus on the main page to white only? Because if the text color of the navigation bar is changed on all pages, you will not be able to see the menu items because the background color on the other pages is white.
This is an accepted solution.
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-index .site-header .grid #AccessibleNav .site-nav li .site-nav__link .site-nav__label{
color:#ffffff !important
}
.template-index .site-nav__link--active .site-nav__label {
border-bottom-color: #ffffff !important;
}
.template-index .site-header .site-header__icons .site-header__icons-wrapper .site-header__search-toggle .icon-search{
fill:#ffffff !important
}
.template-index .site-header .site-header__icons .site-header__icons-wrapper .site-header__cart .icon-cart{
fill:#ffffff !important
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024