A user wants to add a phone number to the header navigation bar of their Dawn theme Shopify store, visible only on desktop devices. They tried using the announcement bar but found it visually unsatisfactory.
Current situation:
Proposed solution:
A community member provided a technical approach:
header.liquid file to add phone number HTML at the desired locationphone_desk_onlybase.css file:@media screen and (max-width: 749px) {
.phone_desk_only { display: none; visibility: hidden; }
}
This CSS media query hides the element on screens narrower than 749px (mobile devices). The user confirmed familiarity with Liquid and HTML coding but needed guidance on implementation specifics.
Hello! I was wondering if there was a way to add a phone number into the header navigation bar for my dawn theme website. I have tried adding it to the announcement bar, but, it does not look good and does not look present. I also don’t want it to show on mobile so that it wont take up all the space. If you could help me out, that will be awesome!
An example of what I want to make:
What I have:
@nhellyer - are you familiar with liquid code editing? because this will need code to be edited in header.liquid file
I am familiar with .liquid coding. I also do know html. I just do not know what and how to do it.
@nhellyer - go to your header.liquid file, check the place where you want to add phone number html in that place, you can set class to this phone div structure like phone_desk_only and set css for it to hide on mobile
Contact Us on - XXXXXXXXXXXXXXXXX
add this css to the very end of your base.css file
@media screen and (max-width:749px){
.phone_desk_only{display:none; visibility:hidden;}
}