Nav menu disappears (started with...

Apr 22nd, 2025 at 02:48 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

Bryan Daniels wrote:
Yes, I left the Carrera template in place because it worked and looked good. I unchecked "Hide 2 items in this breakpoint", which was the entire menu and the Dropdown menu.

Just unchecking the hidden items is for working on the canvas, when exprting they will me hidden when viewed live,

So the container
ID= navbarNav at small device widths is set to display = none
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 22nd, 2025 at 02:55 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

Its A Kind Of Bali Magic wrote:
Bryan Daniels wrote:
Yes, I left the Carrera template in place because it worked and looked good. I unchecked "Hide 2 items in this breakpoint", which was the entire menu and the Dropdown menu.

Just unchecking the hidden items is for working on the canvas, when exprting they will me hidden when viewed live,

So the container
ID= navbarNav at small device widths is set to display = none and at larger widths (768px) it is set to flex.
Your layout should match that

Then the "font-icon-link" (the 3 bars) is set to display = block at small devices and at breakpoint (768) it is set to display - "none"

You should also check the attributes for that also match the one on the original template.

STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 22nd, 2025 at 03:18 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

You should also consider changing the gradient background on the second dropdown (Books) because the last menu link in that dropdown, sort of merges with the page, (on the original template the page background is white so it's ok but on your page I would suggest just a solid background colour
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 22nd, 2025 at 03:21 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

Its A Kind Of Bali Magic wrote:
You should also consider changing the gradient background on the second dropdown (Books) because the last menu link in that dropdown, sort of merges with the page, (on the original template the page background is white so it's ok but on your page I would suggest just a solid background colour


And you need address the layout at the nearest breakpoint below 780px, it id way far too wide and things are off the the right (that's like on my phone help in landscape view.
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 22nd, 2025 at 10:03 PM
User 126812 Photo

Bryan Daniels
Registered User
57 posts

Thank you so much for the help. I hadn't read this until now, and it took me a while to figure out that the font-icon-link was missing entirely. I had to rebuild it. Everything is working as it should with that menu except one detail. When I click on the hamburger, it opens, then immediately collapses. I can't find any difference between mine now and the Carrera menu I started with.
Thank you also for the tips. I did change the gradient of the dropdown.
Apr 23rd, 2025 at 02:58 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

Bryan Daniels wrote:
Thank you so much for the help. I hadn't read this until now, and it took me a while to figure out that the font-icon-link was missing entirely. I had to rebuild it. Everything is working as it should with that menu except one detail. When I click on the hamburger, it opens, then immediately collapses. I can't find any difference between mine now and the Carrera menu I started with.
Thank you also for the tips. I did change the gradient of the dropdown.



Looks to me like maybe you haven't given that hamburger thingy, all the attributes it needs to work
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 23rd, 2025 at 03:03 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

your hamburger code

<a class="glyph navbar-toggler" href="#" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation"><i class="coffeecup-icons-menu7"></i></a>

Careera hamburger code

<a class="glyph navbar-toggler collapsed" href="#" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="coffeecup-icons-menu7"></i></a>
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 23rd, 2025 at 03:06 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,573 posts

Its A Kind Of Bali Magic wrote:
your hamburger code

<a class="glyph navbar-toggler" href="#" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation"><i class="coffeecup-icons-menu7"></i></a>

Careera hamburger code

<a class="glyph navbar-toggler collapsed" href="#" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="coffeecup-icons-menu7"></i></a>
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Apr 23rd, 2025 at 09:02 PM
User 126812 Photo

Bryan Daniels
Registered User
57 posts

I've looked and looked for that Glyph Navbar toggler piece, but I don't know where it resides. The True/false one I had changed just to test it and then put it back to false, so not sure why that showed up that way. How do I see that code to modify it?
Apr 23rd, 2025 at 10:30 PM
User 126812 Photo

Bryan Daniels
Registered User
57 posts

I finally found how to see the HTML, and on my screen, they were identical. Neither had the "Collapsed" on the end. I don't know where else to look. I've looked through as much code as I could read and don't see the difference.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.