makennaokeeffe Posted August 2 Posted August 2 (edited) Looking for code to force the main desktop navigation to show on the mobile version. I created a visual navigation below my navigation bar, but have my about page linked and my contact page linked (as a button) in my main navigation. Since there are only two pages linked in my main nav, and the rest of the pages linked below in a custom nav, when you click the burger on mobile, you can only see the two pages linked in the main nav. Would love to override the mobile nav. Thanks in advance for your help! 🙂 https://makennaokeeffe.com/ Edited August 2 by makennaokeeffe
makennaokeeffe Posted August 2 Author Posted August 2 @tuanphan Do you know of code for this? I always appreciate your input! 🤩
HoaLT Posted August 2 Posted August 2 1 hour ago, makennaokeeffe said: @tuanphan Do you know of code for this? I always appreciate your input! 🤩 Can you share your URL here so we can check it? If your site is not published yet, provide it a protected password, share it here so we can access your site Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link)
makennaokeeffe Posted August 2 Author Posted August 2 @HoaLT Weird! I had linked it, but then i guess it didn't show up. Added it to the forum topic, but here it is also: https://makennaokeeffe.com/ Thanks for reaching out! 🙂
tuanphan Posted August 4 Posted August 4 You can use this to Custom CSS box @media screen and (max-width:991px) { .header-title-nav-wrapper {max-width: 40%;} .header-display-desktop { display: flex !important; justify-content: space-between; align-items: center; } .header-display-mobile { display: none; } .header-burger { display: none; } .header-nav { display: flex !important; } .header-nav { display: flex !important; flex: 70% !important; justify-content: flex-end; } .header-actions.header-actions--right, .header-actions.header-actions--right div { display: flex !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!)
makennaokeeffe Posted August 6 Author Posted August 6 @tuanphan This is amazing! Thank you! Only thing is that the spacing between the two navigation items is pretty far apart (see screenshot). Is there any way to edit or change that code to have them either be closer together, or to stack on them right justified? Thank you!
Solution tuanphan Posted August 10 Solution Posted August 10 On 8/6/2024 at 7:09 AM, makennaokeeffe said: @tuanphan This is amazing! Thank you! Only thing is that the spacing between the two navigation items is pretty far apart (see screenshot). Is there any way to edit or change that code to have them either be closer together, or to stack on them right justified? Thank you! Use this new code @media screen and (max-width:991px) { .header-nav { position: absolute; right: 0; top: 50%; z-index: 9999; transform: translatey(-50%); } .header-actions.header-actions--right { position: relative; top: 50px; } .header-title-nav-wrapper {max-width: 40%;} .header-display-desktop { display: flex !important; justify-content: space-between; align-items: center; } .header-display-mobile { display: none; } .header-burger { display: none; } .header-nav { display: flex !important; } .header-nav { display: flex !important; flex: 70% !important; justify-content: flex-end; } .header-actions.header-actions--right, .header-actions.header-actions--right div { display: flex !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!)
makennaokeeffe Posted August 12 Author Posted August 12 @tuanphan thank you so much!! that worked! I really appreciate your help! tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment