milkcowsgomoo Posted February 1 Share Posted February 1 I am looking to add an image of country flag onto the top left of the web page. The flag needs to be a link to an external site of that country. My problem is that I also have a hamburger menu. I am unable to have 2 custom codes. Is it possible to get some help in creating some new code for this? This is what I am trying to achieve. This is my menu code: .header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-burger { order: 2 !important; } .burger-inner.header-menu-icon-doubleLineHamburger .top-bun { height: 3px !important; transform: translateY(-10px); } .burger-inner.header-menu-icon-doubleLineHamburger .patty { background-color: #000 !important; height: 3px !important; transform: unset !important; } .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun { transform: translateY(10px); height: 3px !important; } .header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title { text-align: unset; } .header-burger { display: flex; } .header-nav { display: none !important; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } I did find code to add an country flag image from one of the forums here from a member: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg" class="cnd"/>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.cnd { width: 50px; margin-left: 20px; } @media screen and (max-width:991px) { img.cnd { position: absolute; right: 2vw; top: 5px; } } </style> But I am unable to use the two together! Please help! preview of site : https://aimekitchen-us.squarespace.com Many thanks!!! 🙂 Link to comment
tuanphan Posted February 4 Share Posted February 4 Don't remove any code in your current code. Add this to Custom CSS @media screen and (min-width:992px) { /* Force burger on desktop */ .header-burger { display: flex !important } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important } @media screen and (min-width: 768px) { .header-menu { left:unset; width: 25% } } nav.header-nav-list>div:not(:last-child) { display: none; } .header-nav { order: 1 !important; text-align: left !important; flex: 0 0 30% !important; margin-left: 0 !important; } .header-title { order: 2 !important; } .header-title a { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .header-announcement-bar-wrapper { padding-top: 5vw !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Pip1 Posted March 21 Share Posted March 21 Hello, I'm trying to do something similar in the navigation of a site I'm working on. I want to have U.S flag, European flag and UK flag that each link to a different website. How do I add the URL links to this script? I've adapted this script found on the forum that was posted above. Quote <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg" class="cnd"/>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.cnd { width: 50px; margin-left: 20px; } @media screen and (max-width:991px) { img.cnd { position: absolute; right: 2vw; top: 5px; } } </style> This might be the wrong way to change it, you can see my version here, can somebody show me where to add my external link on the svg Quote <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" class="us"/>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.us { width: 50px; margin-left: 10px; } @media screen and (max-width:991px) { img.us { position: absolute; right: 12vw; top: 15px; } } </style> <script> $(document).ready(function() { $('<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg" class="eu"/>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.eu { width: 50px; margin-left: 10px; } @media screen and (max-width:991px) { img.eu { position: absolute; right: 26vw; top: 15px; } } </style> <script> $(document).ready(function() { $('<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg" class="uk"/>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.uk { width: 50px; margin-left: 10px; } @media screen and (max-width:991px) { img.uk { position: absolute; right: 40vw; top: 15px; } } </style> Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2024 at 9:38 PM, Pip1 said: Hello, I'm trying to do something similar in the navigation of a site I'm working on. I want to have U.S flag, European flag and UK flag that each link to a different website. How do I add the URL links to this script? I've adapted this script found on the forum that was posted above. This might be the wrong way to change it, you can see my version here, can somebody show me where to add my external link on the svg You can share your site url, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Olly1 Posted April 25 Share Posted April 25 Hi, I've just entered this menu code works great. Is there a way to customise it? I cant seem to figure out how to do it. Link to comment
tuanphan Posted April 27 Share Posted April 27 On 4/25/2024 at 8:45 PM, Olly1 said: Hi, I've just entered this menu code works great. Is there a way to customise it? I cant seem to figure out how to do it. Customize color, size or? And what is site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Pip1 Posted Friday at 10:33 AM Share Posted Friday at 10:33 AM (edited) hi @tuanphan, I've changed my flag code slightly but I'm having issues displaying them at the breakpoint on Tablet and mobile, You can see it is ok on desktop but as I size down the screen it goes all over the place. Would you know of a fix for this? Edited Friday at 10:37 AM by Pip1 Link to comment
Pip1 Posted Friday at 10:34 AM Share Posted Friday at 10:34 AM 1 minute ago, Pip1 said: hi @tuanphan, I've changed my flag code slightly but I'm having issues displaying them at the breakpoint on Tablet and mobile, You can see it is ok on desktop but as I size down the screen it goes all over the place. Would you know of a fix for this? <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('<a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us" /></a>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.us { width: 30px; margin-left: -30px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ @media screen and (max-width:768px) { img.us { position: absolute; right: 28vw; top: 15px; } } </style> <script> $(document).ready(function() { $('<a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk" />').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.sk { width: 30px; margin-left: 10px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ } @media screen and (max-width:768px) { img.sk { position: absolute; right: 20vw; top: 15px; } } </style> Link to comment
tuanphan Posted Saturday at 08:24 AM Share Posted Saturday at 08:24 AM 21 hours ago, Pip1 said: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('<a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us" /></a>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.us { width: 30px; margin-left: -30px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ @media screen and (max-width:768px) { img.us { position: absolute; right: 28vw; top: 15px; } } </style> <script> $(document).ready(function() { $('<a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk" />').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.sk { width: 30px; margin-left: 10px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ } @media screen and (max-width:768px) { img.sk { position: absolute; right: 20vw; top: 15px; } } </style> What is site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Pip1 Posted Saturday at 08:52 AM Share Posted Saturday at 08:52 AM Hi @tuanphan sure https://manatee-flugelhorn-pmg9.squarespace.com/ pw: pip1 Link to comment
Pip1 Posted Saturday at 09:01 AM Share Posted Saturday at 09:01 AM For some reason my U.S flag becomes unclickable on mobile too, not sure why that's happening, maybe my positioning is too close to the hamburger icon? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment