-
Top hamburger menu @media screen and (max-width: 776px) leaves white area when I remove
.nav.main { height: 0px; visibility: hidden; display: none;
Media query above 776px - .nav.mainbackground-color: var(--dark);disappears and ul text drops down because of hamburger white space.
Poetry.LA
Suggestions please. -
Are my css & script links in the right order?
Hi @kat,
- Iâm not really a great designer. Not sure what you want it to look like or if something is behaving unexpectedly.
- The links and scripts seem to be in okay order. You have jQuery before the other two scripts that require it. I canât really tell if the CSS is in order because I donât know what your site is supposed to look like.
Best of luck,
Bob
<i> font-awesome in mini-Menu > social-icons (youtube, twitter, FB, Linkedin) donât show in mcgraphics.us/poets.
What am I doing wrong?
On the bright side I fixed the white space problem & got my mobile hamburger working.
*REMOVE THAT<!-- <i class="fa-youtube fab fa-2x"></i>
<i class="fa-facebook-square fab fa-2x"></i>
<i class="fa-twitter-square fab fa-2x"></i>
<i class="fa-instagram-square fab fa-2x"></i> -->*REMOVE THIS
**= <!-- -->
1 Like
Not sure why you suggested I remove all my âcomment outs `<-- -->â which I use as notes to myself. Removing didnât make any difference.
No itâs still there!
<!-- <i class="fa-youtube fab fa-2x"></i>
<i class="fa-facebook-square fab fa-2x"></i>
<i class="fa-twitter-square fab fa-2x"></i>
<i class="fa-instagram-square fab fa-2x"></i> -->
And I advice to check your HTML validation anyway for errors!
Donât see any fonts/css for the icons where do you have them?
[type or paste code here](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css)
1 Like
Your advice worked perfectly, David @AllMediaLab. Thank you so much.
I swear Iâd added font-awesome repeatedly - chuckle.
Iâm in redefining and endless troubleshooting.
Any advice on how many sections to put on this page?
Hi @kat
Glad you found it!
You did well on the <section> parts, but remember you also have the <footer> tag for the footer, the <header> for navigation and the <main> for the main content in them you put the <section> parts for your own convenience.
Like said before be sure to take the HTML validation errors out first, because they are going to cause you trouble! A handy extension for Chrome is:
When you click the silver wheel and the menu opens you can validate HTML, besides the validation in Pinegrow that is also good. Local and online. On the sever you test with the normal Validate HTML!
Every time you change some code to fix the error you click again to validate till the errors are taken care of by you.
David
1 Like
Excellent advice!
I been using Firefox dev tools, rather than Chrome. I installed Chrome Web Developer, but no silver wheel.
Went back to VSC and caught a 2 ype & changed to âtype.â
By validate html did you mean problem check in VSC & PG. Both showed all OK?
I havenât designed the Donate section or done the Footer yet.
Thanks for your help, David @AllMediaLab .
@kat Hi Kat,
Think Chrome is better, but the silver wheel shout appear in the top right of the Chrome browser header.
When you click this link you see the same HTML errors in your website:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fmcgraphics.us%2Fpoets%2F
Whit this info you can fix the errors and click the above link again until you have solved all problems.
David
1 Like
https://validator.w3.org/ is amazing!
Still no silver wheel in the upper right side of Chrome. Likely it will magically appear at some point.
Thank you so much David @AllMediaLab !!!
With top left mobile, menu-wrap on, when I click #Donate page schrolls to #Donate, but the the .menu-wrap remains on unless I click the X.
Menu-wrap <input class="toggler" type="checkbox"> is in menuOverlay.css. It css only, no js.
Is there a way to have the menu-wrap turn off and X go back to a hamburger when I click a menu item like #Donate?
Hi @kat,
I think you would have to use JavaScript to emulate a click on the toggler when you select a menu item.
Cheers,
Bob
Totally sad. Iâm not good with js.
If I went back to trying to do your Using media queries and CSS functions to create a responsive design in Pinegrow - YouTube hamburger would I be able to click a link to close the overlay?
Hi @kat,
No, sorry. That tutorial showed just the basics of having styling changes at different screen sizes. I really canât think of a completely pure CSS solution if you have anchor links. I think you will have to use JS. Iâll give you a walk-through.
To open your menu, you are using a checkbox and then styling through CSS based on whether the checkbox is checked or not. So, to get the menu to close you need to un-check the input. This can be done using a small function added to the bottom of the page.
<script>
function closeMenu() {
let toggle = document.querySelector('.toggle');
toggle.checked = false;
}
</script>
Then, you need to call the function when somebody selects a menu item. The easiest way to do this is to add an âonclickâ attribute to each. In Pinegrow this is done through selecting the menu item, going to the Properties panel, and entering it in the Attribute Editor. Click in the editor and type onclick, then hit tab and enter `closeMenu()â. Add this to all of the menu items.
Hope this helps,
Bob
1 Like
Doesnât work. I donât think I got onclick & closeMenu()â right. I also tried
</a></li>See PG screenshots.
At bottom of index.html
</Section> <!-- End </div> --> <script> function closeMenu() { let toggle = document.querySelector('.toggle'); toggle.checked = false; } </script>
Hi @kat,
In the attribute editor you have added two attributes, neither with a value. I the code that you include in the screenshot it is the same thing. The code you add in the bullet point is essentially correct except you may need a space between the closing quote of the â#Aboutâ and the onclick attribute.
The script looks fine to me from your post.
Cheers,
Bob
1 Like
<li><a href="#About" onclick="closeMenu()" >About P.L.A.</a> </li>
Still doesnât work. I donât think I understood correctly.
That looks fine. Can you add your code to your example link so that I can take a look?
Bob