Buy Now Button dissappearing after selecting product variant

[manan123]

I'm using dawn theme for my store but when i chose another variant on product page the buy now button get dissappeared please help me to solve this ....

my website url is --- https://mansaroverfurnishings.com/

[ThePixelEdge]

Hello @manan123 
https://mansaroverfurnishings.com/products/classic-solid-cotton-bed-sheet-by-ross-4?variant=41689565...
I checked here and It is working , can you please provide a url to debug this at our end.

Thanks in advance.

[manan123]

yeah its fixed now thanks ..can you please help me to shift the position of sign in option from footer to upward only on mobile device, see screenshot for understanding....

want to shift this highlighted option to the upward

[ThePixelEdge]

Hello @manan123

After reviewing the situation, we have identified a solution. If for any reason you're unable to implement the suggested changes, please let us know. We can request collaborator access to make those adjustments on your behalf. Please inform us of your decision.

Remove position:relative from below class
.menu-drawer__utility-links

Add this new class
.menu-drawer__utility-links .menu-drawer__account {
	position: absolute;
	top: 20px;
	left: 20px;
}

 

[manan123]

could you please guide me where to put this code??

[ThePixelEdge]

Hi @manan123 

You could add it in component-menu-drawer.css file in the assets folder . 

Let me know if that works for you. 

[manan123]

its not working please help me there's my component-menu-drawer.css file

.header__icon--menu {
position: initial;
}

.js menu-drawer > details > summary::before,
.js menu-drawer > details[open]:not(.menu-opening) > summary::before {
content: '';
position: absolute;
cursor: default;
width: 100%;
height: calc(100vh - 100%);
height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
top: 100%;
left: 0;
background: rgba(var(--color-foreground), 0.5);
opacity: 0;
visibility: hidden;
z-index: 2;
transition: opacity 0s, visibility 0s;
}

menu-drawer > details[open] > summary::before {
visibility: visible;
opacity: 1;
transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}

.menu-drawer {
position: absolute;
transform: translateX(-100%);
visibility: hidden;
z-index: 3;
left: 0;
top: 0;
width: calc(100vw - 3rem);
padding: 0;
background-color: #ffffff;
overflow-x: hidden;
--color-foreground: 123, 123, 123;
}

.js .menu-drawer {
height: calc(100vh - 0%);
/* height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))); */
}

.js details[open] > .menu-drawer,
.js details[open] > .menu-drawer__submenu {
transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

.no-js details[open] > .menu-drawer,
.js details[open].menu-opening > .menu-drawer,
details[open].menu-opening > .menu-drawer__submenu {
transform: translateX(0);
visibility: visible;
}

.js .menu-drawer__navigation .submenu-open {
visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

@media screen and (min-width: 750px) {
.menu-drawer {
width: 40rem;
}

.no-js .menu-drawer {
height: auto;
}
}

.menu-drawer__inner-container {
position: relative;
height: 100%;
}

.menu-drawer__navigation-container {
display: grid;
grid-template-rows: 1fr auto;
align-content: space-between;
overflow-y: auto;
height: 100%;
}

.menu-drawer__navigation {
padding: 5rem 0;
}

.menu-drawer__inner-submenu {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-top: 5rem;
}

.no-js .menu-drawer__navigation {
padding: 0;
}

.no-js .menu-drawer__navigation > ul > li {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.no-js .menu-drawer__submenu ul > li {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.js .menu-drawer__menu li {
margin-bottom: 0.2rem;
}

.list-menu__item.menu-drawer__menu-item {
padding: 1.9rem 2.4rem;
text-decoration: none;
font-size: 1.4rem !important;
letter-spacing: 2.39px;
color: #7B7B7B;
}

.menu-drawer__inner-submenu .list-menu__item.menu-drawer__menu-item {
text-transform: none;
letter-spacing: 1.95px;
font-size: 1.3rem;
}

.no-js .menu-drawer__menu-item {
font-size: 1.6rem;
}

.no-js .menu-drawer__submenu .menu-drawer__menu-item {
padding: 1.2rem 5.2rem 1.2rem 6rem;
}

.no-js .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item {
padding-left: 9rem;
}

.menu-drawer summary.menu-drawer__menu-item {
padding-right: 5.2rem;
}

.no-js .menu-drawer__menu-item .icon-caret {
right: 3rem;
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover{
color: rgb(var(--color-foreground));
background-color: rgba(var(--color-foreground), 0.04);
}

.menu-drawer__menu-item--active:hover {
background-color: rgba(var(--color-foreground), 0.08);
}

.js .menu-drawer__menu-item .icon-caret,
.no-js .menu-drawer .icon-arrow {
display: none;
}

.menu-drawer__menu-item > .icon-arrow {
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%);
}

.js .menu-drawer__submenu {
position: absolute;
top: 0;
width: 100%;
bottom: 0;
left: 0;
background-color: #ffffff;
z-index: 1;
transform: translateX(100%);
visibility: hidden;
}

.js .menu-drawer__submenu .menu-drawer__submenu {
overflow-y: auto;
}

.menu-drawer__close-button {
padding: 1.9rem 2.4rem;
text-decoration: none;
display: flex;
align-items: center;
font-size: 1.4rem;
width: 100%;
background-color: transparent;
font-family: var(--font-body-family);
font-style: var(--font-body-style);
text-align: left;
text-transform: uppercase;
}

.no-js .menu-drawer__close-button {
display: none;
}

.menu-drawer__close-button .icon-arrow {
transform: rotate(180deg);
margin-right: 1rem;
}

.menu-drawer__utility-links {
padding: 2.4rem 2rem 3rem;
background-color: #F4F4F4;
position: relative;
}

.header--has-social .menu-drawer__utility-links {
padding: 2.4rem 2rem 3rem;
}

@media screen and (max-width: 749px) {
.header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
padding: 2rem;
}
}

@media screen and (max-width: 989px) {
.header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
padding: 2rem;
}
}

.menu-drawer__account {
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 0.99px;
color: rgb(var(--color-foreground));
margin-bottom: 3rem;
}

.menu-drawer__utility-links:has(ul:empty) .menu-drawer__account,
.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
margin-bottom: 0;
}

.menu-drawer__account .icon-account {
height: 2rem;
width: 2rem;
margin-right: 1rem;
color: #000000;
}

.menu-drawer__account:hover .icon-account {
transform: scale(1.07);
}

.menu-drawer .list-social {
justify-content: flex-start;
gap: 3.6rem;
}

.menu-drawer .list-social:empty {
display: none;
}

.menu-drawer .list-social__link {
padding: 0;
color: #4E3A3A;
}

.close-menu-drawer {
min-width: auto;
min-height: auto;
position: absolute;
z-index: 2;
padding: 2.4rem;
right: 0;
top: 0;
}

.close-menu-drawer svg {
width: 13px;
height: auto;
display: block;
}

[ThePixelEdge]

Hi @manan123 ,

Can you Please Provide Collaborator Access to us so that we can Inspect it if you are not able to do it . 
teampixeledge@gmail.com

[manan123]

Please check my component-menu-drawer.css file once , if it's need to edit this file only then please edit the file & paste code here otherwise i'll give you access

[ThePixelEdge]

Hello @manan123 
Providing access woudl be great.

Thanks in advance.

[manan123]

thanks , but i adjust it accordingly please tell me how to remove that space only ....