SOMEKINDstudio Posted December 12, 2023 Share Posted December 12, 2023 Hi ! I was wondering if there was a way to link the position of the navigation to the grid of the fluid engine? Here you can see the website as is : https://www.bluefashion.be/brands2 So the idea would be to make sure that the word BRANDS in the navigation always is aligned with the content below. I tried 2 methods : 01. Specifically targetting the elements on the webpage in CSS to align with BRANDS 02. Hide the header and the navigation and build the logo & the navigation in a text block. So basically rebuilding the logo & the navigation in the fluid engine grid. https://www.bluefashion.be/brands2-1 But basically the menu will not be as beautifully aligned as in the first method and will split in smaller screens. The first method is really tricky because when the customer messes up anything, it would not work anymore. Any help on this would be appreciated. Thank you, Kristel Link to comment
tuanphan Posted December 13, 2023 Share Posted December 13, 2023 You mean align Brands with Page Content or align Page Content with Brands? 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
SOMEKINDstudio Posted December 13, 2023 Author Share Posted December 13, 2023 Hi! Thanks for the reply. Good question, I mean aligning the page content with BRANDS. The position on this page of the navigation is perfect : https://www.bluefashion.be/brands2 But either of both would work, as long as everything is aligned on any page. Thanks, Kristel Link to comment
gcerceo Posted January 9 Share Posted January 9 Very good question. I'd like the opposite, aligning navigation to the baseline grid. And, splitting it up much wider than whats available in the standard nav menu design options. Link to comment
cscholz Posted April 15 Share Posted April 15 (edited) This is the code I found from tuan. div.header-title { width: 50% !important; } .header-nav { text-align: left !important; padding-left: 0 !important; } Edited April 15 by cscholz 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