How to add link to nav bar?

i added a new link in my nav,

amenities

the nav is breaking again :frowning:

i looked into it myself and tried to fix it, no go

please pass on what i need to have the navigationn not break

next, explain what you did :slight_smile:

ok my plan…

there is A LOT of nothing in my code! yes? so i thought of putting all the amenities into 1 page… RATHER than a page per amenitity

hopefully thre is less empty space…

anyway, thats my plan!

to be helpful here, is there space between the logo and the nav? to squeeze in another link?

see what i mean?

i have more questions, BUT do not want to burden you :slight_smile:

i will post a step at a time

thanks!

“Breaking” in what sense? And why was it “no go” when you tried to fix it?

If you post your broken code and explain the problem clearly, we can see where you’ve gone wrong and give you guidance on correcting it.

1 Like

Hello,

see https://forallthetime.com/BI-500/index.html

“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 :slight_smile:

i tried myself to resolve the problem and had no luck in doing so

i hope i am clear :slight_smile:

thanks!

Then you could simply have changed the media query for the nav from 1220px to 1320px and your problem would have been solved :slight_smile:

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.:slight_smile:

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.

e.g.

  @media screen and (max-width: 1220px) {
    .write-up ifr {
      display: none;
    }

    .wrap img {
      width: 200px;
    }

  .menu a span {
    display: none;
  }
}

Obviously if you need to change only one of those to a different width media query then you’d put it in its own media query.

1 Like

again, thanks

i will look into a side nav

will NOT come to you immediately :slight_smile:

i want to solve this myself

a habit… a pour one, yes?

THAT is a help!

until i burn it in, i can use this example as a template

anyways, wish me luck! :slight_smile:

DONE!

please see https://forallthetime.com/BI-600/index.html

i took your advice!

side nav

looks good, yes?

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 :frowning:

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 :slight_smile:

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

remember, Rome was not built in a day :slight_smile:

i am feeling pretty good about this

That’s good for a first attempt but here are a few pointers :slight_smile:

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.

5)Don’t do things like this either:

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>

Inline css and inline JS should be avoided most of the time. Put them in the js and css files where they belong.

Keep the html clean.

<span class="open-nav">&#9776; </span>

  1. Always plan ahead and expect the unexpected :slight_smile:
1 Like

thanks!

yes, sir, i cannot find it either!

please, let me try to figure this out myself :slight_smile:

in y nav should i use

<

<li><a href="index.html">Home</a></li>

or

<a href="index.html">Home</a>

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 :frowning: 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 :slight_smile:

please see https://forallthetime.com/BI-700/practice.html

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 :frowning: 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?

shall i remove that?

where does this go?

again, i thank you!

You have multiple rules for that image again?


.panel-image {
    float: left;
    width: 100%;
    max-width: 28rem;
    min-width: 8rem;
    height: auto;
    margin: 0 1rem 1rem 0;
    border: 1px solid #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.panel-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}
.wrap img{
  width: 30rem;
}

.adjust-margin img{
  width: 0rem;
}

If this image is a different from other pages then give it a new class instead of panel-image and style it properly.

<img class="panel-image" src="IMAGES/SANY0400-1024x768.jpg" alt="lighthouse">

The last rule is nonsense really.

.

adjust-margin img{
  width: 0rem;
}

Why would you give it no width?

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 :slight_smile:

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?

<div class="container">
    <div class="write-up">
         <div class="adjust-margin">
                <div class="wrap">

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.

e.g.

<div class="container sub-page">

.sub-page{background:red;}

1 Like

thanks for the lesson!

you are helping me here!

please see https://forallthetime.com/BI-700/index.html

i took your advice and i feel good about what i did :slight_smile:
you will see i removed some code

also, i took away the junk that was not needed

i made sure my .container div tags matched, they are fine!

i know little about JS. please clarify here… what does my code need to look like to work?

i tried addding <

span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>

  <script>
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
  </script>

into <script src="my.js"></script>

no luck

also, i remove ALL

 <div class="write-up">
         <div class="adjust-margin">
                <div class="wrap">

and now that is functioning fine :slight_smile:

tried this for .conatiner .chair and maybe other .container classes

i could not tmake it work:(

what i am trying is to adjust image sizes… i do NOT want you to repeat your self… my problem is not the address but the size

please bare with me :slight_smile: this is tricky for me

on the amenities page iwant images and text inside the container… everything to line up just right… your thoughts, please :slight_smile:

also, could not make the hamburger move… yes i tried .

sidenav .closebtn {
  position: absolute;

and adjust this code, wont move…

i like your idea have have it stick, i will try that one on my own

again, thanks!!!

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.

1 Like

i did add co-ordinates, just did not think to publish :frowning:

thanks, i want to mention again i know little JS,

and i looks like you added some CSS that was not there before, why?

;.sidenav.visible {
pointer-event: 

.sidenav {

pointer-event: none;

both have issues in the sense “Unknown Property” yellow underline in VS Code :frowning:
i will put that into my code

ok, i think i follow

yes. i see that in your code pen… again… why not use <li> </li> in my navigation?

i will come back to this thread when i have better JS skills… i think thats best :slight_smile:

so sorrry

https://forallthetime.com/BI-700/index.html

is a MESS!

MY OWN FAULT!!

i wil try to fix it :slight_smile:

again

https://forallthetime.com/BI-700/index.html

is junk

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).

Why did you remove the panel -image class from the image? Don’y you want the text to wrap anymore?

It was this:

<img class="panel-image" src="IMAGES/SANY0432-300x225.jpg" alt="chair">

Then referring to my previous answer you need to remove this block of code completely.

.panel-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

Or rename it to something else if you want to use it on another page where its not floated.

For the panel-image on the home page you need the original piece of code.


.panel-image {
    float: left;
    width: 100%;
    max-width: 28rem;
    min-width: 8rem;
    height: auto;
    margin: 0 1rem 1rem 0;
    border: 1px solid #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

Now the image will float and the text will wrap. Don’t use the class of panel-image anywhere else unless you want floated items at that size.

1 Like