Hello,
please share how to make a dropdown menu from https://botanicgardentravelers.org/ 's navigation
any existing link will do 
many thanks!
What have you tried so far?
1 Like
i did a google search, found a lot of results
ultimately i made this
you will see i tweaked the HTML and CSS
i feel pretty good about this!
it looks like my original code
initially i wanted to add a dropdown to existing code, but this worked out fine
some questions thoughā¦
first i am not good at floats
how can i shift the navigation to the center or to the right?
how can i code the āactiveā link to fill the top to bottom space?
how do i code a arrow next to my dropdown link?
how do i center the logo?
MANY THANKS!!
progress!
Unfortunately, that menu is inaccessible to anybody using keyboard navigation, unlike the one I linked to above.
(Maybe I should have linked to the repo, rather than the demo: https://github.com/robinpoort/vanilla-js-responsive-menu)
1 Like
Thatās a good learning curve and gets you into the mindset of how things work:)
However as @TechnoBear said that menu falls short on many fronts and you would be better advised to utilise the one that was linked to as it is both keyboard and touch friendly and accessible. I know it uses a lot more JS but drop down menus by nature are inherently inaccessible and even competent coders struggle to make them work for everyone.
Note that hover doesnāt really work on touch devices and although the menu may open it will not close unless something else is selected so its better to have a click menu for small screen rather than a hover menu (which is what the responsive menu above does nicely).
It is also very tricky to add keyboard navigation to a drop down and unless you are proficient at both css and js then it is not a simple matter.
Lastly the html should be semantic and a nested list structure gives an inherent structure to the menu rather than bare anchors and divs.
Just for practice as I still recommend the menu above you can do these things:
You can shift it to the right if you use flexbox as we donāt really use floats these days. Then all you need do is add a margin-right to the h1 to push it all to the right.
Remove the height:100% from .active and then remove the margin top and bottom from the h1 and then use the flexbox approach I mentioned and then they will all be the same height (apart from the dropdown).
You can use the :before or after pseudo element to create an arrow. Hereās an old demo of mine. Scroll down to line 68 of the css panel to see the relevant code.
You can add a basic keyboard accessibility using :focus-within which will allow tab to work through the menu.
Iāve added most of the above into the code below which should go at the end of your css as it over-rides some things.
.topnav {
display: flex;
}
.topnav > a,
.topnav > h1{
display:flex;
align-items:center;
}
.topnav > .dropdown{
display:block;
}
.topnav h1 {
margin:0 auto 0 0;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
display: block;
background-color: #745d46;
}
.dropdown:hover .dropbtn,
.dropdown:focus-within .dropbtn{
background: #ac7e54;
}
.dropbtn{
display;lflex;
height:100%;
align-items:center;
}
.active{height:auto;}
/* arrows */
.dropdown .dropbtn {
position:relative;
padding-right:20px;/* make space for arrows*/
}
.dropbtn:after {
content:"";
position:absolute;
right:3px;
top:50%;
margin-top:-3px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
It will then look like this:
This is only for example only and to teach how to do things as I recommend that you use semantic html structure (nested lists) and use a full blown accessible menus such as the one already linked to. However it is good practice to try and build your own and play around because only them do you know what the problems are. 
1 Like
Thanks!
i followed that link
unfortunately i got confused and intimated
i a not sure what i am looking at
is there a simpler way to attain the appropriate code? another resource?
maybe provide a codepen?
again, i thank you!
Go to https://github.com/robinpoort/vanilla-js-responsive-menu.
Click on the āCodeā button and choose āDownloadā.
Save the .zip folder and extract the files.
You now have a fully working version to look at and play with.
You only need to edit the HTML to show your own links, and the CSS to match your styling. There should be no need to touch the JS. Once you have the menu working as you wish, you can copy it to your site, remembering to link to the JS files, too.
2 Likes
MANY THANKS!!
if needed, i will follow up
do i owe you a $0.25 now?
WOW thatās a lot of code
to be honest, i am a bit intimatedā¦ a lot to learn here!
asking for help
i cannot understand how to make an active link a color, #ac7e54
also, spacing out the links
and having the linkās color fill from top to bottom as https://botanicgardentravelers.org/, and have the text centered
i have put some time into trying to understand AND experimenting with this CSS, but need help at this point
thanks!
HA!
yes, i gave you no code to look at!
coming soon!!
You seem to have copied the CSS into the JS panel, rather than the JS. 
a:active {color: #ac7e54;}
Assuming you mean āactiveā (i.e. as you are clicking it) and not the link you are currently on.
Please explain how you want the links spaced out. If you are trying to replicate the layout you already have, then it would make sense to use the same number of links and the actual text in your CodePen.
How should the āNature Travellersā text be positioned?
You donāt seem to have included all the necessary files,
Start from a good working copy before you start to adapt it to your needs so that you know it is working.
This seems to be the code you need although I only copied it from the demo and did not download it (lifeās too short).
Open and close the browser to test the mobile version so that you know what should happen,
Fork that as an example to work with and to refer to. The rest should just be using CSS to change the look of menu to suit your purpose.
1 Like
Iāll give you a start with the menu to use flex instead of floats but Iāll leave all the colours up to you as that should be something you can work out.
BINGO!
thats perfect!
though when i put your code into my vs code it doesnāt match
i copy and paste the code!
WIERD!
the only difference is the link not going from top of the nav to the bottom
also, when i put MY code into a codepen, it works!
i deduce i have a problem with vs codeā¦ i tried everything i could think of
your $0.02 please
BTW, i am looking to actually understood the code! if you can, kindly tell me what lines in the codepen you changed to be fixed!
many thanks!!
You must have missed something out or perhaps are linking to an old version. Note that the js should be at the end of the html but that would not change the css issue.
Youāll need to upload the code to a real server and then we can debug from there. If its working in codepen then thereās something different in your local version that wonāt be possible to diagnose from here. Open up your web inspector and inspect the menu items and see if you can see whatās stopping it from working.
I assume you are checking in a real browser and not just the editors display?
I removed the height:40px for the menu, and its items but only in the media queries for larger screens. This left the mobile screen untouched. I then removed the floats from the menu and instead set the ul to display:flex which automatically lines up the list items, I also set the list items to display:flex so we could get 100% height on the anchors.
This was the main change:
@media (min-width: 600px) {
.navigation_container {
display: flex;
min-height: 5rem;
}
.navigation_container ul {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navigation_container li,
.navigation_container a {
display: flex;
height: 100%;
align-items: center;
}
}
I probably tweaked some margins and padding but canāt remember. I did remove the margins from the p.logo otherwise that pushes the whole header bar down due to collapsing margins.
I set a min height for the navigation container but you have to ensure there is no top or bottom padding on it otherwise the links canāt be full height.
I also removed the positioning from the logo because flex will align it vertically central without needing to be positioned.
Become familiar with the web inspector and you can inspect styles and see what does what and you can also change styles/values in the inspector to see what happens.
2 Likes
no go 
i tried a real browser, same issue
kindly see https://forallthetime.com/
note the nav is not the same, again i am after the link to full, top to bottom
also, i tried un-installing and re-installing vs code, no luck
i have heard of something called ārevoā (sp?) which wipes out the program you want gone completely away
then i would re-install vs code
please help!
thanks!
The js is adding a class of js and using that class to set to display:block when we want display:flex.
Add flex in 2 places as shown here:
.js .navigation_container {
display: none;
/* 1 */
}
.js .navigation_container.rm-initiated {
display: flex;
/* 2 */
}
@media (min-width: 600px) {
.js .navigation_container {
display: flex;
/* 3 */
}
}
Check that the above code hasnāt been added more than once as there is something odd but it may be because it is showing as a scss file. If you are not using scss then remove the source mapping comments.
Anything like this:
/*# sourceMappingURL=responsivemenu.css.map */