ābreakingā means at break point 1302 in dev tools the navigation links splits into a larger nav, links ontop of links. rather than a nav that is uniformaly straight
i am sure you will understand when you see it
i tried myself to resolve the problem and had no luck in doing so
Then you could simply have changed the media query for the nav from 1220px to 1320px and your problem would have been solved
Alternatively remove the right margin from the logo and give the nav more room.
.logo{
margin-right:0;
}
You canāt just keep adding items to your top nav as that may indicate that your whole UI architecture is wrong. Maybe you should have a sidenav instead as you can put more links vertically than you can horizontally.
Alternatively have two rows on the nav with the important items larger and the less important ones smaller in anther row.
This is a design architecture question rather than a straight css question.
Lastly, why have you started splitting every item in the same media query?
e.g. You have this:
@media screen and (max-width: 1220px) {
.write-up ifr {
display: none;
}
}
@media screen and (max-width: 1220px) {
.wrap img {
width: 200px;
}
}
@media screen and (max-width: 1220px) {
.menu a span {
display: none;
}
}
They are all using the max-width:1200px query and follow each other and therefore should just be one media query.
how can iadjust placement of the hamburger?i tried
the hamburger is hiding my logo
also,
i am makig an Amenities pageā¦ on the Amenites card, there are 4 linksā¦ each leading to a MASSIVE amount of empty space
so i got thinkingā¦ put all 4 pages into 1 page!
also, i took you advice and looked for inspirations or ideas on line, thanks for that!
i found content that realy looked full and usefulā¦ hardly any blank space af none at allā¦ I WANT THAT!
please, any aesthetic tips would be appreciated
what is your thinking on top nav vs side nav?
as you can guess i am a jugglerā¦ and i started slow and simple and built my skillsā¦ now i haved worked professionaly and have been publishdedā¦ its all bout time, patience and perseverance AS I AM NOW with coding
the more i do and the more time i put into coding the beter coder i will be
Thatās good for a first attempt but here are a few pointers
1)Where is the logo ? I couldnāt see one in the code.
2)Why have you done this:
.wrapper {
margin-top: 15rem;
}
What is the point of that magic number?
It does nothing for the layout and makes a big gap in the middle and pushes other content below the fold. Itās pointless but I need to know why you think itās a good idea? Maybe you like showing the user nothing but space but I donāt understand what you were trying to achieve here. Why do you think itās a good idea?
3)Why did you move the three boxes out of the centred wrapper?
They are now so wide you canāt really read them easily. You need to think about the design a little more and not just what you see on your own screen.
4)You broke the sticky footer effect also along the way also.
my plan there is to remove the 3 cards all together
the Amenities card will go into a single page,i think i expalined that above
flow upā¦
struggling withthe images i know you have addressed this. its best if i do this without youā¦ but if i cant figure it out i will ask for further clarification
is there a media query adjusting the size of the imageā¦ please see for yourself as you make the viewport smaller
having trouble adjusting the practice image NOT its location like before
ultimately i want all 4 Amenities here
why do some images work, like lighthouse, and other dont? i mean others do not work like that? i dont get thatā¦
your $0.02 on side nav vs top nav?
also, on the Amenities page, my goal is to center erything in the colored portion,wrapper? should i use flex or grid here? i want to place ALL this into the practice.html page template, NOT the page itself!.. i just like the way it looks!..
how can i move the hamburger away off to another location?
Its only showing because of the min-width in the first panel-image rule. You need to keep tight control of your styles and donāt let them get messy again.
Only when you have created a style in the css for it and added a class and then learned how to add a click event listener in the JS file to that element. Otherwise no nav
The same way you would move any other element. It all depends what you want to do with it?
If you donāt want it to scroll away with the document you could use position: fixed and place it in the top left corner or top right or wherever you need it.
Why have you nested three divs when none are needed?
writte-up, adjust-margin and wrap are not needed as all their styles could be supplied via .container.
I already mentioned that you would not name a style as .adjust-margin as that makes no logical sense. Use something that doesnāt refer to a css property as such. e.g. .intro, .warning, .amenities etcā¦
If you want to modify a rule then add a class at the same level and use that to modify it.
You didnāt add any co-ordinates so its not moved anywhere. You have to tell it to go where you want it. bear in mind that absolute elements are removed from the flow so it will be your job to make sure it doesnāt overlap anything else.
Here is your nav with a proper script so please study the code and see how it works. Copying and pasting will not help you learn. Please practice until you understand it and then you wonāt have the same issue again.
Also remember that html is semantic so when you have a nav then use the nav element (for main navigation). If you have actions to be done such as opening and closing a nav then those elements should be buttons. Anchors are links that take you somewhere and not action buttons.
Try not to mix js and css. Css does the style and js does the action. Therefore in the JS you can add a class and then you use that class in the css to change the style.
Yes there was a typo in there (which I have since corrected) it should be pointer-events (width an s on the end). e.g. pointer-events: none;
I added pointer-events: none on the hidden version of the nav so that it could not accidentally be clicked (even if it was invisible). When the nav is shown I restore the pointer-events to the initial state which means you can interact with it (i.e. click a link).
