Hi,
I’m using the Dawn theme and recently added social links to the announcement bar. They work fine and look great, but the addition increased the announcement bar height. How can I decrease the size of the announcement bar?
@Fantasy ,
Both sections have different div. Do you want to have the same in one line, then you have to do some code-level modification. How you have added social media icon?
@Fantasy Both sections are different. The best way is to change the background color.
@Fantasy ,
ul.footer__list-social.list-unstyled.list-social {
float: right;
width: 82%;
}
.announcement-bar.color-accent-1.gradient {
display: flex;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Hi, @oscprofessional
Thank you so much!
Hi, @oscprofessional
To add the social media icons to the announcement bar I added the code to the announcement-bar.liquid under the edit code section. I typed the word announcement in the search bar. I followed the instructions via this link Add Social Icons to Announcement Bar Dawn Theme In order to get them to open in a separate tab I added a blank target for all link codes for each social media outlet like this
Hi,
Thank you so much for assisting me. It looks really great on desktop, but not on mobile. Can you assist me with adjusting the code so It looks great on mobile devices as well?
@Fantasy ,
@media only screen and (min-width: 768px)
ul.footer__list-social.list-unstyled.list-social {
float: right;
width: 82%;
}
.announcement-bar.color-accent-1.gradient {
display: flex;
}
Update the code.
Hi, @oscprofessional
Unfortunately, that didn’t work. Here is the code I used to get the social icons in the announcement bar.
-
{%- render ‘icon-twitter’ -%}
{{ ‘general.social.links.twitter’ | t }}
-
{%- render ‘icon-facebook’ -%}
{{ ‘general.social.links.facebook’ | t }}
-
{%- render ‘icon-pinterest’ -%}
{{ ‘general.social.links.pinterest’ | t }}
-
{%- render ‘icon-instagram’ -%}
{{ ‘general.social.links.instagram’ | t }}
-
{%- render ‘icon-tiktok’ -%}
{{ ‘general.social.links.tiktok’ | t }}
-
{%- render ‘icon-tumblr’ -%}
{{ ‘general.social.links.tumblr’ | t }}
-
{%- render ‘icon-snapchat’ -%}
{{ ‘general.social.links.snapchat’ | t }}
-
{%- render ‘icon-youtube’ -%}
{{ ‘general.social.links.youtube’ | t }}
-
{%- render ‘icon-vimeo’ -%}
{{ ‘general.social.links.vimeo’ | t }}
{%- if settings.social_twitter_link != blank -%}
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
{%- endif -%}
I added this code to the base.css file to decrease the height of the announcement bar.
ul.footer__list-social.list-unstyled.list-social {
float: right;
width: 82%;
}
.announcement-bar.color-accent-1.gradient {
display: flex;
}
In a separate thread, I created to change the newsletter form position and location of the social icons https://community.shopify.com/topic/1723690 I added this code to place the social icons and newsletter form to the right in the fourth widget position.
I added this code to the base.css file in order to change the positions
.footer-block–newsletter.grid__item {
display: block !important;
}
ul.footer__list-social.list-unstyled.list-social {
float: left !important;
width: 100% !important;
justify-content: flex-start !important;
}
I then also added this code to the base.css to help the form and social icons align properly on mobile but it didn’t work. I think the announcement bar code and footer code might be conflicting in some way because neither is properly aligning in mobile view.
Lastly, I used this code to adjust the footer height and spacing which works great. This code was added to the base.css file.
.footer-block__details-content>p {
line-height: 1 !important;
margin: 0 0 14px 0 !important;
}
.footer__content-top {
padding-bottom: 2rem !important;
}
.footer-block–newsletter {
width: 100% !important;
max-width: 100% !important;
}
Currently, here is how my announcement bar looks on the desktop and on mobile. The desired look for both is text on the left and in the center and social media icons on the announcement bar on the right which will still align properly in case I add additional social icons in the future.
Here is how my footer with the newsletter and social icons look on desktop and here is how they look in mobile view.
Hi, @oscprofessional
How are you doing today? Are you still able to assist me with adjusting the announcement bar so that it displays properly on mobile devices? I tried the suggested code, but it didn’t work.
@media only screen and (min-width: 768px)
ul.footer__list-social.list-unstyled.list-social {
float: right;
width: 82%;
}
.announcement-bar.color-accent-1.gradient {
display: flex;
}
@Fantasy ,
What is an issue? share the URL
Hi, @oscprofessional
I successfully added the code you provided to halo get social icons in the header. They’re fine on desktop, but do not look good on mobile. My website is Melanin Crown
@Fantasy ,
.announcement-bar.color-accent-1.gradient {
display: flex;
justify-content: space-between;
}
Hi, @oscprofessional
I tried the code above and it didn’t do the trick. The social icons on the desktop are still appearing on the left and here is how they look on mobile view.
@Fantasy ,
.announcement-bar.color-accent-1.gradient {
display: flex !important;
justify-content: space-between !important;
}
Hi, @oscprofessional
I’m not sure why, but none of the codes are working to fix it on mobile. I cleared my cache, history, and cookies.
Hi, @oscprofessional
Which file codes? Are you referring to other code inside the base.css file rather than placing it at the end of the file? I tried it and it still doe not display properly on mobile not sure why. Feel free to right click on my website. This is mind-boggling. Website
Hi,
I’ve successfully added social icons to the announcement bar. They look really great on the desktop but are misaligned on mobile. How do I edit the code to have them aligned properly and optimized on all mobile devices? I have been trying to figure this out, but can’t seem to wrap my brain around it. Any assistance would be greatly appreciated.
Here is the code:
Goes in the announcement bar liquid file
-
{%- render ‘icon-twitter’ -%}
{{ ‘general.social.links.twitter’ | t }}
-
{%- render ‘icon-facebook’ -%}
{{ ‘general.social.links.facebook’ | t }}
-
{%- render ‘icon-pinterest’ -%}
{{ ‘general.social.links.pinterest’ | t }}
-
{%- render ‘icon-instagram’ -%}
{{ ‘general.social.links.instagram’ | t }}
-
{%- render ‘icon-tiktok’ -%}
{{ ‘general.social.links.tiktok’ | t }}
-
{%- render ‘icon-tumblr’ -%}
{{ ‘general.social.links.tumblr’ | t }}
-
{%- render ‘icon-snapchat’ -%}
{{ ‘general.social.links.snapchat’ | t }}
-
{%- render ‘icon-youtube’ -%}
{{ ‘general.social.links.youtube’ | t }}
-
{%- render ‘icon-vimeo’ -%}
{{ ‘general.social.links.vimeo’ | t }}
{%- if settings.social_twitter_link != blank -%}
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
{%- endif -%}
Goes in base.css file
.announcement-bar.color-accent-1.gradient {
display: flex !important;
justify-content: space-between !important;
}
This code reduces the height of the announcement bar
ul.footer__list-social.list-unstyled.list-social {
float: right;
width: 82%;
}
.announcement-bar.color-accent-1.gradient {
display: flex;
}