Nav menu disappears (started with...

User 2699991 Photo


Registered User
5,282 posts
Online Now

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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,282 posts
Online Now

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.

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,282 posts
Online Now

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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,282 posts
Online Now

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.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 126812 Photo


Registered User
44 posts
Online Now

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.
User 2699991 Photo


Registered User
5,282 posts
Online Now

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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,282 posts
Online Now

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>
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,282 posts
Online Now

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>
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 126812 Photo


Registered User
44 posts
Online Now

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?
User 126812 Photo


Registered User
44 posts
Online Now

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.