Adding dropdown menu to my existing navigation

[OBXjuggler]

Hi,

colors are perfect!

on the drop down, i am looking to make the current link SOLID

like the non-drop-down links

eg the home page link is lighter when that is the SELECTED page until the user clicks another link… making that link the SELECTED link.

i am after the same on the drop down

say Nature Reserves is the selected, current link… when i hover over Gardens, Nature Reserves should be the lighter brown… until a new link is clicked…

yes, i tried making the dropdown links class="active"

one by one, i did not get my desired result

another thing, please

when my code drops below 600px, the selected link… doesn’t matter which… it stays light brown as i click the down arrow on Gardens. when i chose my arrow link it all fits again…

basically Gardens is lit AND the selected link is lit… until i choose another link

keep in mind my Gardens doesnt go anywhere, only the links dropping from Gardens

i hope this helps you!

again, thanks!

[PaulOB]

@PaulOB

.navigation_container li:hover ul a:hover{
background:#ac7e54;
}

You see how that hover rule works to make the drop down link change color then you’d need to use the same specificity as that rule but with your active class on the target anchor.

You would remove the hover parts of course.

[PaulOB]

@OBXjuggler

another thing, please

when my code drops below 600px, the selected link

I’m not really sure what you are asking bit I would refer you to the original code and the behaviour of that menu at the size you mention.

https://robinpoort.github.io/vanilla-js-responsive-menu/

Obviously if a menu contains a submenu then that should be reflected in the display otherwise you will forget it is part of a submenu.

[OBXjuggler]

sorry i forgot to include the latest code

https://forallthetime.com/

@PaulOB

You see how that hover rule works to make the drop down link change color then you’d need to use the same specificity as that rule but with your active class on the target anchor.

You would remove the hover parts of course.

unfortunately i dont get it

is my latest code, above, correct?

please provide a codepen… i think thats the best way for me to grasp the concept

i will get this code, and concept, with your help…

move onto the logo THEN re-asses where i should be at my current skill level… i am not at this level

seriously, i sincerely appreciate all your patience

we are very close!

[PaulOB]

@OBXjuggler

unfortunately i dont get it

What don’t you get?

I said find the rule that creates the hover effect which you can do manually or use devtools to find it. I gave you the rule anyway

Note that you can force the hover state in devtools by clicking the three dots at the side of the panel and selecting ‘force hover’ for that rule. As you can see from the rule I gave you there is a hover on the list parent and a hover on the anchor.

In devtools you can force those states.

then in the other panel the rule appears (which is the same as the one I gave you)

i.e.

.navigation_container li:hover ul a:hover{
background:#ac7e54;
}

Now if you follow my instructions and remove the hover but add an active class in the html and the css you end up with this.

.navigation_container li ul a.active{
background:#ac7e54;
}

<a class="active" role="menuitem" href="UNESCO.html">UNESCO</a>

Then you will get this result: (I just used ‘red’ for effect)

As you are having a little trouble understanding this menu it may have been better if you went with the standard installation but just change the colours to your theme via search and replace (either in your editor or use an online search and replace tool). At the moment you are only changing half of the colors needed for the complete interaction of that menu.

The easiest way to change the colours would be first to list the colours the original menu uses for its default, hover and active states, Next decide what colours you want to replace each of those colours with. Then in your editor do a search and replace for every instance of that colour in the menu and replace it with your colour. In that way you won’t miss out the small screen, large screen, click menu, hover menu styles.

It’s a shame that the menu wasn’t created with css variables (custom properties) and then all you’d need to do was change the variable colour.

[OBXjuggler]

WE DID IT!!

your code worked!!

what i was ultimately after…

https://forallthetime.com/

2 tweaks… with the hamburger menu, is there a way to increase the area of the “Garden” arrow? make it easier to tap?

and when i click “Gardens” then select “Botanical Gardens” a “>” appears next to it

head scratcher for me… i am not sure what is going on!

my final step, a logo

i tried coding a <p>Nature Travelers<p> but had a rough time making a border… i am so embarrassed

i am looking for a 2px solid black with a border radius of 2 em that fits perfectly around the <p></p>… no extra spacing

then place the logo on the nav

i am sure you can knock that out in your sleep!

OK. i think we can both agree i bit off (way) more than i can chew here with this whole menu / dropdown we have been discussing.

i understand CSS, but in this case i am overwhelmed and intimated by the volume of CSS and not understanding that complexity

and my JS skills are minimal

use mentioned dev tools, i am almost totally un-familiar with dev tools

i definitely need to stop and get back to coding at my skill level. i am sure you agree!

what do you suggest?

i am interested in dev tools

found this https://developer.chrome.com/docs/devtools/

good place to start?

OK!!! WE DID IT!!!

an accomplishment for me!

NO WAY could i have done this with out your help!

you were always helpful, patient and you know what you are talking about!

i am glad i have this code in my arsenal!

again, time to re-asses where my skill set is and work on that code

i have said this before… but i will again…

THANK YOU SO MUCH!!!

[PaulOB]

@OBXjuggler

s there a way to increase the area of the “Garden” arrow? make it easier to tap?

You can increase its size by changing the border-width values like this.

.rm-subtoggle {
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 15px 15px 0 0;
    border: none;
    padding: 0;
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-radius: 0;
    background: transparent;
    color: transparent;
}

I changed it from 10px to 20px in the above code which will double the size.

@OBXjuggler

and when i click “Gardens” then select “Botanical Gardens” a “>” appears next to it

That’s a typo in your html and northing to do with the css.

<a class="active" role="menuitem" href="[botanical-gardens.html](https://forallthetime.com/botanical-gardens.html)">Botanical Gardens></a>

Botanical Gardens>

Just remove the symbol from your html.

@OBXjuggler

i tried coding a <p>Nature Travelers<p> but had a rough time making a border… i am so embarrassed

Show me where you tried this and then we can see what you are attempting. I can’t really work out where you mean or where it is to go.

@OBXjuggler

then place the logo on the nav

I gave you a demo originally with room for a logo at the left edge.

However your new nav is much longer and I would suggest that you have the logo above the nav in some sort of header.

@OBXjuggler

i am interested in dev tools

found this https://developer.chrome.com/docs/devtools/

good place to start?

Yes that’s a good place to start but I would suggest you open the devtools every time you code and just get used to looking at it and playing around with it.

You only need the simple things at first such as finding and modifying styles (and html). 90% of devtools is advanced stuff that will be of no use to you yet.

[OBXjuggler]

hi there,

i asked something similar above, no clear code

please see https://forallthetime.com/index.html

how do i make the links larger… say on all 4 sides? while keeping the color full, top to bottom

also, having trouble with my logo

i cannot line it up with my navigation

i plan to put a border around it

kindly explain your code so i can learn from you… i think i can follow this!

thank you!

[PaulOB]

@OBXjuggler

i asked something similar above, no clear code

I’ve already given a full example of full height buttons on the original demo here.

However as your design has changed and the code is not the same anymore you will need to do something like this to over-ride all the fixed heights on that menu.

@media screen and (min-width: 900px) {
  .navigation_container > ul,
  .navigation_container > ul > li {
    height: auto; /* was 40px */
  }
  .navigation_container > ul > li > a {
    padding: 15px 30px; /* padding increased*/
    height: auto; /* was 40px */
  }
}

That will only apply on larger screens otherwise the menu will wrap too soon and be broken.

(Note: You seem to have removed any hover menu styles for the dropdown which makes it harder to navigate.)

@OBXjuggler

also, having trouble with my logo

i cannot line it up with my navigation

i plan to put a border around it

There was no logo in the link supplied.You’ll have to add the logo so I can see what it is and where you want it to go. As I mentioned before if you want a logo in the centred section of the same row as the menu then there will be little room for it especially if you have expanded those nav links now. (See my original demo that has a dummy logo in place.)

[OBXjuggler]

coming along nicely!!

added my media queries…

with the hamburger dropdown links the current link is not displayed on my iphone…

and in chrome dev tools at smaller screens it works!

and on my desktop, non hamburger, its flawless… whats going on?

also, the hamburger links do not fill the width in the way the non drop downs fill

@PaulOB

Yes that’s a good place to start but I would suggest you open the devtools every time you code and just get used to looking at it and playing around with it.

You only need the simple things at first such as finding and modifying styles (and html). 90% of devtools is advanced stuff that will be of no use to you yet.

thanks for the tip!

will play around

i ask for a few examples of what i can do with my 10%

thanks!

[PaulOB]

@OBXjuggler

also, the hamburger links do not fill the width in the way the non drop downs fill

None of those things are happening on the original demo I gave you but you can over-ride some of that behaviour with the following code added at the end of the css.

@media screen and (max-width: 599px) {
  .js .navigation_container.rm-initiated {
    display: block;
  }

  .navigation_container li li {
    float: none;
  }
}

with the hamburger dropdown links the current link is not displayed on my iphone…

It’s there on my phone in the link at post#50.

You still seem to have scss linked to it as well as they are showing in devtools. Remove this line from the responsivemenu css.

/*# sourceMappingURL=responsivemenu.css.map */

Then I suggest you rename the css files just to avoid caching issues.

@OBXjuggler

and in chrome dev tools at smaller screens it works!

and on my desktop, non hamburger, its flawless… whats going on?

When you click the toggle device toolbar you often have to click refresh on the page to make sure it’s working. The toggle device toolbar is only an approximation anyway as it can’t actually emulate a real device.