Aligning navigation with fluid grid

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 

You mean align Brands with Page Content or align Page Content with Brands?

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 

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.

This is the code I found from tuan.

div.header-title {
    width: 50% !important;
}
.header-nav {
    text-align: left !important;
    padding-left: 0 !important;
}