Re: want transparent announcement bar on mobile device

manan123 · ‎02-07-2024

hey, i am using dawn theme i want transparent & same colour announcement bar on mobile device also as its on desktop , please tell me how to do that.

Store Url -- https://mansaroverfurnishings.com/

ThePrimeWeb · ‎02-07-2024

Hey @manan123,

Follow this instruction and you should be fine. 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px) {
    slideshow-component.slider-mobile-gutter {
        transform: translateY(-50px);
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-07-2024

Desktop:

Mobile:

That's the same colour code

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-09-2024

Hey @manan123,

I cannot shift only the account icons with CSS, I can shift the whole section

If this is ok, then you can do that,

The instructions are same as above

The code is:

<style>
.menu-drawer__navigation-container {
    grid-template-rows: auto 1fr !important;
}

.menu-drawer__utility-links {
    grid-row: 1 !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-09-2024

That's because you removed the <style> tags

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

Ritu-N · ‎02-07-2024

Hello Manan,

Please add this CSS
@media screen and (max-width: 480px){
#MainContent {margin-top: -115px;}
}

Let me know if this helps you

Thanks,
Ritu

manan123 · ‎02-07-2024

not working i added this in base.css file can you please guide me properly where i have to add this code?

Ritu-N · ‎02-07-2024

Hey,
you can add it to your theme.liquid before </head> was closed.

It seems you have added it to index file.
You have to put it like this :
<style>

@media screen and (max-width: 480px){
#MainContent {margin-top: -115px;}
}

</style>

Let me know if this helps you

Thanks

manan123 · ‎02-07-2024

sorry its still now working i'm using dawn theme & here's my theme.liquid file you can check

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>

{% include 'avada-seo' %}

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

<title>
{{ page_title }}
{%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

{% render 'meta-tags' %}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
@font-face {
font-family: GillSans;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("{{ 'GillSansRegular.woff2' | asset_url }}") format("woff2");
}

@font-face {
font-family: MyriadPro;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("{{ 'MyriadPro-Regular.woff2' | asset_url }}") format("woff2");
}

@font-face {
font-family: Maginia;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("{{ 'MaginiaRegular.woff' | asset_url }}") format("woff");
}

{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
--gradient-background: {{ scheme.settings.background_gradient }};
--gradient-background-rgb: {{ scheme.settings.background_gradient.red }}, {{ scheme.settings.background_gradient.green }}, {{ scheme.settings.background_gradient.blue }};
{% else %}
--gradient-background: {{ scheme.settings.background }};
--gradient-background-rgb: {{ scheme.settings.background.red }}, {{ scheme.settings.background.green }}, {{ scheme.settings.background.blue }};
{% endif %}
--color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
--color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
--color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
--color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}

{{ scheme_classes | prepend: 'body' }} {
color: rgba(var(--color-foreground));
background-color: rgb(var(--color-background));
}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

--popup-border-width: {{ settings.popup_border_thickness }}px;
--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

--drawer-border-width: {{ settings.drawer_border_thickness }}px;
--drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
--drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
--drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
--drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
--drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;

--ff-primary-1: GillSans;
--ff-mag: Maginia;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{%- unless settings.type_body_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

{%- if settings.predictive_search_enabled -%}
<link
rel="stylesheet"
href="{{ 'component-predictive-search.css' | asset_url }}"
media="print"
onload="this.media='all'"
>
{%- endif -%}

</head>
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %} template--{{ template | handleize }}">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ 'accessibility.skip_to_text' | t }}
</a>

{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}

{% sections 'header-group' %}

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>

{% sections 'footer-group' %}

<ul hidden>
<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
<li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
</ul>

window.cartStrings = {
error: `{{ 'sections.cart.cart_error' | t }}`,
quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
};

window.variantStrings = {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
};

window.accessibilityStrings = {
imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
shareSuccess: `{{ 'general.share.success_message' | t }}`,
pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
};
</script>

{%- if settings.predictive_search_enabled -%}
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{% if content_for_header contains 'pickystory' %}
<script defer src="https://cdn.pickystory.com/widget/dist/latest/pickystory-widget.min.js"></script>
{% endif %}

<script>
function addAnchorToIcons(){
var $icons = document.querySelectorAll(`.list-social__item a`);

if (!$icons){
return;
}

for (var each of $icons){
each.setAttribute("target", "_blank");
}

}

addAnchorToIcons();
</script>
</body>
</html>

Upsellise · ‎02-07-2024

Hello @manan123 ,

I see there's a reply suggesting a CSS configuration to make your announcement bar transparent or match the same color as your website background. However, I'd like to propose another solution that requires no coding skills and is free!

The Searchanise Upsell & Marketing app offers a "Multi-Announcement Bar" feature, which displays alternating messages at the top or bottom of your webstore. You have complete control over the text, design, and display rules. Best of all, it maintains consistency across different devices, whether desktops, smartphones, or tablets.

Here's an example of what it looks like in action.

Feel free to reach out if you have any questions or need further assistance.

Best regards,

Upsellise

Did you find our reply helpful? If so, please hit the Like button and mark it as the solution.
Get stable growth for your online Shopify store with the Searchanise Upsell & Marketing app!
Increase average order value, conversion rates, and sales!
Install the app and start your free trial!

ThePrimeWeb · ‎02-07-2024

Hey @manan123,

Follow this instruction and you should be fine. 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px) {
    slideshow-component.slider-mobile-gutter {
        transform: translateY(-50px);
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-07-2024

thanks you sooo much!!! one more thing i also want the header background colour of mobile exactly same as it is in desktop..please help me in the code!!

I also attached screenshots for better understanding

Mobile Device:

Desktop :

want this colour which i highlighted same in the mobile device

ThePrimeWeb · ‎02-07-2024

It's already same for me in my mobile

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-07-2024

Please Look again its like beige type colour in mobile & greyish type in desktop please check!!

ThePrimeWeb · ‎02-07-2024

Desktop:

Mobile:

That's the same colour code

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-07-2024

thanks can you please check my others threads as well i have also mentioned youu!

manan123 · ‎02-09-2024

hey can you please help me , this banner image on checkout looks good but i want to customize the banner image on checlout for mobile also because its not looking good, check screenshot below

Desktop --

Mobile --

Looks too messy & not visible please help me to fix this so it can be properly visible on desktop & mobile..

My store url - https://mansaroverfurnishings.com/

im using dawn theme

ThePrimeWeb · ‎02-09-2024

Hey @manan123,

You need Shopify Plus Plan to customize checkout.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-09-2024

oh okay, can you please help me to shift the account icon from bottom to top in menu drawer on mobile device...

want to shift this highlighted option to the upward

My store url --https://mansaroverfurnishings.com/

Please help me in this code

ThePrimeWeb · ‎02-09-2024

Hey @manan123,

I cannot shift only the account icons with CSS, I can shift the whole section

If this is ok, then you can do that,

The instructions are same as above

The code is:

<style>
.menu-drawer__navigation-container {
    grid-template-rows: auto 1fr !important;
}

.menu-drawer__utility-links {
    grid-row: 1 !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-09-2024

thanks!! i can adjust , please tell me instructions to remove the social links below sign/register option i dont want it

ThePrimeWeb · ‎02-09-2024

Add this code

<style>
.menu-drawer__utility-links .list-social {
    display: none;
}

.menu-drawer__utility-links > a {
    margin-bottom: 0;
}

.menu-drawer__utility-links {
    padding-bottom: 2rem !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-09-2024

thanks, but its not working the coding appears at top but i add this code

.menu-drawer__utility-links .list-social { display: none; }

to the base.css file and its worked

manan123 · ‎02-09-2024

how to remove this unwanted space ?

ThePrimeWeb · ‎02-09-2024

On the previous answer there's more code, those were to remove the space.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-09-2024

but its not working its appears like thiss....

i have to put in theme.liquid file before </head> right??

ThePrimeWeb · ‎02-09-2024

That's because you removed the <style> tags

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

manan123 · ‎02-09-2024

thankyou so much!! actually i dont remove those style tags i accidently remove this closing > tag from previous style tag thats why its appear on top thanks

manan123 · ‎02-13-2024

hey, can you please help me i want to remove this badges from footer

want to remove this....please help me

Store link - https://mansaroverfurnishings.com/

manan123 · ‎03-13-2024

hii i added two custom liquid for videos at different places but when i change the width of one custom liquid its automatically changes the width of other two i want to change the width of only one custom liquid please help me

my site url ; https://mansaroverfurnishings.com/

Cultura-Carnica · ‎04-02-2024

hi! can anyone help me make my ad Transparent Announcement Bar? None of the previous codes have worked for me. My website is www.culturacarnica.it

Re: want transparent announcement bar on mobile device

want transparent announcement bar on mobile device

Community Blog Articles