mrgnhghs Posted October 6, 2019 Share Posted October 6, 2019 I am working in Avenue and have made my site-title and navigation bar fixed. As the template is set, the site-title is left justified, and the navigation bar is right justified. I would like to move the navigation bar closer to the title, so that there is not a large gap. I have added the following in order to do this, however, now when the window size is reduced, the navigation bar overlaps the site-title. Any ideas on how to fix this? #topNav nav { float: left !important; margin-top:0px} #header nav {position: relative; bottom:0px; left: -150px;} #header { position:fixed; z-index: 1; background-color: white; padding-top: 30px; width: 90%; padding-bottom: 0px; } Link to comment
tuanphan Posted October 6, 2019 Share Posted October 6, 2019 @mrgnhghsYou should share site url to check. Difficult to think with only code. 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
mrgnhghs Posted October 6, 2019 Author Share Posted October 6, 2019 @tuanphan thanks! it isn't published yet. is that okay? I've also included two screenshots one at full screen and one how it is presenting at a smaller window. https://magenta-decagon-4exg.squarespace.com password: password Link to comment
tuanphan Posted October 6, 2019 Share Posted October 6, 2019 @mrgnhghs Incorrect password 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
mrgnhghs Posted October 6, 2019 Author Share Posted October 6, 2019 sorry! It's password. @tuanphan Link to comment
tuanphan Posted October 6, 2019 Share Posted October 6, 2019 @mrgnhghs remove left: -150px in #header nav {position: relative; bottom:0px;left: -150px;} then edit #header {...} to #header { position: fixed; z-index: 1; background-color: #fff; padding-top: 30px; width: 75%; padding-bottom: 0px; transform: translateX(-50%); left: 50%; } 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
mrgnhghs Posted October 6, 2019 Author Share Posted October 6, 2019 @tuanphan thank you for all your help. Unfortunately, the title and nav bar are still overlapping. I've updated the css you sent. Link to comment
tuanphan Posted October 6, 2019 Share Posted October 6, 2019 @mrgnhghsHave you removed left: -150px; yet? 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
mrgnhghs Posted October 6, 2019 Author Share Posted October 6, 2019 @tuanphan lifesaver! you're right. I didn't read well. THANK YOU Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.