please see
in chrome dev tools at 1436px my nav is fine the way i want it
at 1435px the nav breaks
at 1189 it goes to hamburger, the way i want it
how to remove 1435px and get rid of the broken code?
thanks!
Where do you find these?
1 Like
Think about what you can do to allow the items to fit in that range.
Maybe reduce the padding on each at that breakpoint or engineer a more fluid padding with percent or vw. Or think about how they could be spaced without using padding and use flex to space them out.
At the end of the day something either fits or it doesn’t so build in a little more flexibility to allow a greater range.
Unless you’ve already changed it it doesn’t break for me?
The hamburger comes into play before it breaks.
lets try this from here
https://forallthetime.com/BI2/index.html
DO NOT mean to frustrate you!
i am trying 
codepen works fine with smaller viewport, no break… however SAME code in VS Code breaks
no luck here https://forallthetime.com/BI2/index.html breaks
ggrrrr
i need your help, please
please be patient
You are using custom fonts which have a very large size. You have not linked to them in codepen so codepen is using a standard font.
You will need to change the font-size of the custom font to something reasonable .
e.g. Do something like this:
@media screen and (max-width:1495px){
.menu a{
font-size:1rem;
}
}
That will allow it to get much smaller.
Your hamburger menu break point happens at around 1350px which is much too wide in my opinion as on my window its already at at the hamburger with just a blank blue line. This is bad UI.
I would suggest that you reduce the font-size to 1 rem as mentioned above and then when before the menu starts to warp or break I would hide some of the text as you don;t really need to be so verbose.
I would reduce the menu text to this.
Buck Island About Location Area Community Rentals Contact Us
Which can be done by adding a span to the html:
<ul class="menu">
<li class="logo">Buck Island</li>
<li><a href="#">About <span>Buck Island</span></a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Area <span>Information</span></a></li>
<li><a href="#">Community <span>Information</span></a></li>
<li><a href="#">Rentals</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
@media screen and (max-width:1200px){
.menu a span{display:none;}
}
That means you can let the page get quite small before the hamburger needs to kick in.
yes, i think i see what you are doing here
please see
https://forallthetime.com/CHAIR/index.html
and
https://forallthetime.com/CHAIR2/index.html
i appplied your media queries at tline 205 for chair, removed for chair2
is there a media query i am not seeing? the font size does change (larger) as the screen gets smaller
also, the links never shorten names, which i hink you were trying to do
still breaking, and my hamburger is still huge
please help me out
You seem to have mixed some styles up there and duplicated things
Why is their dropdown code in there as it conflicts with some of the code.
Your media query over-ides must be in order as you can’t swap up and down size when changing the same property. If you use max-width media queries then they must reduce in size (min-width are the opposite). media queries aren’t exclusive ans styles written after them will cascade and be affected.
I’ll have to come back to this tomorrow but this a start to get some semblance of order to the nav (the drop down code should be removed later when tested).
Also try to keep things together as you were putting styles all over the place which makes editing hard. I’ll try and find some time tomorrow to tidy up a bit more.
look foeard to it!
the @media queries doesnt help?
Hello,
ok, i had too much coming at me
i decided to re-do the project
of course i am using the old content, but make the site easier to code
see
https://forallthetime.com/BI24/index.html
this not working now 
i am very sorry!
my nav is breaking again and links are spread out un-evenly
also, trouble making the image, chair, responsive… you wont see it because i removed it
to let you know, i tried to solve this with out help. but now need help
sorry to bug you about this
i have a problem and need your help
thank you
On my screen, each of your navigation links are 318.03px wide at default, and shrink proportionately as they go.
By what do you mean ‘spread out un-evenly’?
Remove the width:100% from here.
nav ul li {
display: block;
/* width: 100%; */
}
That did it!!!
kindly tell me why it works now?
i meant there was less space sometimes and more space sometimes between my links, NOT always the same distance
i hope i answered your question
BTW
Paul sent me the solution anyways… crisis averted
With width:100% in your LI’s, they took up the whole bar with no spaces between them (each one trying to be 100%, so none of them were 100%, and instead they split the width equally).
With out width:100%, the LI is only as big as the text, and the spacing reverts to the UL’s rule of justify-content: space-between, to distribute the space not consumed by their widths…between them. (HTML ever so clever with naming things)
3 Likes