Archived topic
Ajax Menu Gap missing
3 replies · Started by troyw on September 30, 2020
Hey team,
With reference to response ID #1446545.
When I implemented this CSS it worked fine;
#primary-menu > #menu-menu > li:nth-child(6) {
margin-left: 150px;
}
However, since then I have changed Layout > Header setting to 'Use Navigation as Header', because without this ticked, the menu was not working responsively very well. (As the page width was reduced, the menu fell to bits).
Now I have selected 'Use Navigation as Header' though, the responsiveness is perfect, but I have lost the Gap in the menu menu. I have tried adjusting the margin-left pixels but nothing I do gives me that gap I need.
All I need is that gap in the menu between the Phone Number and 'My Account'
Any ideas?
Thanks
You can try this CSS code:
@media (min-width:1024px){
.main-nav ul li:nth-child(7) {
margin-left: 150px;
}
}
@media (max-width:768px){
.main-nav ul li:nth-child(7) {
margin-left: auto;
}
}
Media rule was added so it doesn't break the alignment in mobile view.
Perfect, Thanks Elvin.
No problem.:)
