Hi
Site link
https://preview.webflow.com/preview/destinyhair?preview=fbe7f2ba228df1385a24244fc2bcd42d
On Ipad landscape, the navbar is pushed down. Even though there should easily be enough space for it.
I’ve added custom code to reduce the logo size to 70%.
But should I need to do this? Should the logo and Brand Link area just shrink with the screen size?
Do not wish to go hacking around if I can help it!
Help appreciated.
First change the navigation bar height to auto (not fixed size like “40px”). So the nav will be always with white BG - better design (in your case its looks like a bug):
Next you dont have enough space so the navbar go to the next line/row (Thats the way float works) . So this is also design issue. You also can use GRID for complex navbars (in your case only floats not always works).
Thanks for taking a look.
There would be enough space if the a.brand-link scaled in proportion to the logo.
(there’s like 30% extra width that isnt required - see above)
That’s what I don’t get.
I’m afraid I don’t get what you mean about the nav height being a bug.
I just have a fixed height for a nav link.
I’ve fixed by using a media query to reduce the size of the .destiny-logo class (just for Ipad landscape).
Not great - but it works.
Thanks
If you really want to create a % layout you must remember for three elements for example the layout should be item1-width% + item2-width% + item-3-width% = 100%
In your case you give to the logo 30%. For the “phone” 50%. And Thats is. The third item (navbar list) will go to the next line or not (depend on his content)
Also if you give to the logo pixel Width it wont change when you change the screen size (without breakpoints)
https://stackoverflow.com/questions/32307862/what-is-the-difference-between-width-in-and-width-in-px
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
