I had to create a sub nav bar below the main nav bar. The problem I’m having is that when I open the site on bigger screens, they do not stay aligned. Here is a screen shot of what I need to accomplish. I tried using, flex box, padding, margin, percentage instead of pixels, but I can’t find the solution. Could someone with a better understanding of code than me, help me out. Please go to projects, there you will find the problem.
wow That was really interesting. I have a solution for your problem, though you need to explain to me first who or what brought you the idea that your navbars should have flexbox?
Also you have nested your divs very awkwardly and in a total unnecessary way.
Set everything to display:block; and don’t nest ENG/ESP with your navbar. Set your brand container and your first navbar to float:left; and your ENG/ESP to float:right. Use margins to give it some room and to place it properly.
In your second navbar, again: Delete all and every style you have given except for font styles, background and such. Set your NavMenu to display;block and float left. Give it a good margin until they align.
Honestly though. It is easier to just drag in a new NavBar. Because you will have to delete a lot of stuff which you really really don’t need.
I did everything from scratch like you suggested and it definitively looks better. I have a problem now. I have set the nav bar height at 10vh and the hero container at 90vh. Of course that if I set the navbar to 10 vh, it will look different on my 13" screen than a 15" screen. What would you suggest to keep the navbar at 60px across all screens and maintain the hero section responsive?
The reason I ask is, I have the hero div as auto > slider at 90vh. If I use auto or 100% in the slider, it won’t expand.
I do not recommend limiting yourself to a single screen. It is tempting at first, but you will discover several issues with this kind of architecture later on. Give your navbar a height of 60px to maintain 60 px across devices. Unless you can use something like math(100vh-60px), I don’t like mixing px with vh because it usually ends very badly. What section / page are you referring to with your other question?
I am terribly sorry
I don’t think I can help you out regarding your question. A slider is a custom built component by the webflow staff. Meaning there are certain things you can’t override, e.g. the 300px height with flex.
Still, there are ways you can h4xx your way to what you want. Set your Navbar#1 to Fixed, top. Set your Navbar#2 to Fixed, top. Offset it by your Navbar#1 height (62px). Give it z-index of a very high value.
This way, you will sacrifice 104px of your images … but you will get what you want.
Honestly I’d do it this way. I’m sorry for the very hurried reply, girly girl is needing attention.
Let me know if this solution works for you!
P.S.: You can always set your slider to offset 104px as well, if want to sacrifice the bottom of the images instead of the top.
That was really interesting. I have a solution for your problem, though you need to explain to me first who or what brought you the idea that your navbars should have flexbox?