I am currently trying to personalised my codecademy pro projects by adding more features to the projects I built using html, css, js, jq, and bs. As I believe the problem is in my JQ, I posted this in JQ forum, if it is not JQ related, I apologise in advance for posting it here.
The problem I encountered is in the jumpstart project when I decided to add a “hamburger” icon to the mobile version of the website. It started well, the navigation texts become nested in a “hamburger” icon when I shrink my browser. The problem arises when I close the hamburger button and enlarge my browser. The hamburger icon disappear (as intended), but so does the navigation texts. How do I make the text to appear automatically as I re-enlarge my browser?
I have tried googling for insights but no luck. Can anyone please help me out?
but its not given the hamburger menu, please give me a way to replicate the problem. Which bootstrap library did you include? Such information is needed
I actually solved the problem. The reason why the navigation menu didn’t show up after I expanded my screen is because the “display: none” is added automatically when i close the hamburger menu. II believe it acted that way due to the way i wrote my jQuery code (pardon me for this as my jQuery knowledge is still limited). But in the spirit of do more and write less, i included a css syntax instead of fixing my jQuery as follow
@media only screen and (min-width: 781px) {
ul {
width: 100%;
display: block !important;
}
And it works.
Thank you so much for trying to help me out, i really appreciate it, also, sorry for the limited information i gave, i am still new to this community.
Yep, now the hamburger menu works. Next time, ensure all the code is there to replicate the problem.
css uses a point system to determine which property to apply in case of conflicting properties.
using !important is a bad idea, given it screws up the point system. But then, jquery using inline style, so you have to use important.
Not a nice solution of jquery, i am surprised. It works, but its not the best solution. You would be wise to read upon the css point system to understand this