Home › Forums › Support › Nav Menu Float Right – but align centre This topic has 22 replies, 3 voices, and was last updated 2 years, 6 months ago by David. Viewing 15 posts - 1 through 15 (of 23 total) 1 2 → Author Posts July 29, 2022 at 3:05 am #2297065 Stephen Hi, I’ve set the nav menu to float to the right of Logo Can I change the alignment (or is it justification) so the nav menu floats right of Logo but aligns centrally in the space right of the logo. Float right, align centrally. Thank you Stephen July 29, 2022 at 3:06 am #2297071 Stephen site address added in private info July 29, 2022 at 4:13 am #2297122 DavidStaff Customer Support Hi there, try this CSS: @media(min-width: 1024px) { .site-header .cart-contents { margin-right: auto; } } July 29, 2022 at 6:14 am #2297247 Stephen Hi, thats great. Can I set a margin in px between floating nav menu and logo so that nav menu floats right but aligns left up to the margin ? And have the basket on the right (which is a hook element – generate_after_header_content) Thank you Stephen July 29, 2022 at 6:42 am #2297281 DavidStaff Customer Support Try this CSS to set the distance between the logo and nav: .nav-float-right #site-navigation { margin-left: 0; } I set it to 0 as you already have padding around your logo from some other CSS. July 29, 2022 at 7:19 am #2297311 Stephen Yes that works great. I’ve given the cart symbol a class and tried to align to the right with .hook-cart { align-content: right; } But thats not worked. Can I align the cart to the right side ? July 29, 2022 at 7:24 am #2297315 DavidStaff Customer Support Try: .hook-cart { margin-left: auto; } July 29, 2022 at 7:33 am #2297324 Stephen Thats works great thank you. I’m trying the mega menu from https://docs.generatepress.com/article/building-simple-mega-menu/ Currently the mega menu dropdown is as wide as the Nav menu. Can I change the mega menu drop down width ? July 29, 2022 at 7:47 am #2297334 DavidStaff Customer Support Its possible, yes, how wide do you want it ? July 29, 2022 at 7:50 am #2297454 Stephen Hi, just trying it out at the moment. Maybe full width or maybe a bit less ? Thanks July 29, 2022 at 11:23 am #2297597 YingStaff Customer Support Try add this CSS: @media (min-width: 769px) { nav .main-nav .mega-menu:hover > ul { position: fixed; z-index: 999; } } July 29, 2022 at 12:27 pm #2297644 Stephen Hi Ying, that works great and makes the mega menu full screen width. Can I make it a bit narrower maybe 80% ? Thanks Stephen July 29, 2022 at 12:40 pm #2297654 YingStaff Customer Support Yes, then try this CSS instead: @media (min-width: 769px) { nav .main-nav .mega-menu:hover > ul { position: fixed; z-index: 999; left: 10% !important; right: 10% !important; width: 80%; } } July 30, 2022 at 5:24 am #2297988 Stephen Thank you, your code as always works perfectly. Unfortunately my ideas are not so good. – Normally the mega menu dropdown is the same width as the nav menu width. – Can I make the mega menu dropdown 50px bigger on each side than the nav menu ? Thanks Stephen July 30, 2022 at 5:36 am #2297995 DavidStaff Customer Support Try this CSS: @media (min-width: 769px) { nav .main-nav .mega-menu:hover > ul { left: -50px !important; width: calc( 100% + 100px ); } } Author Posts Viewing 15 posts - 1 through 15 (of 23 total) 1 2 → You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In