Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Navigation Menu Visibility.

segami
Registered User
Quote
2023-09-09 18:55:12

Hi all,

Just loving Rocketcake... However, I have a question.

Is it possible to make a navigation menu invisible so that it only appears when the mobile navigation menu is triggered at whatever pixels size it is set for it?

The reason being is that I am using buttons for page navigation, which I am controlling with breakpoints, so it looks untidy if I have both buttons and a navigation menu both shown when at desktop size.

I have tried covering the navigation menu with an image and tried a container, both set to the page background colour and have added breakpoints for visibility, but when either the image or the container become invisible, so does the navigation menu underneath them.

Many thanks in advance.


micaelo
Registered User
Quote
2023-09-09 20:36:13

You can set breakpoints for both your navigation buttons (which you already did) and for a navigation menu, so that the navigation menu becomes visible only at a screen width when it would collapse to the "Hamburger" menu anyway.

For the navigation mene this will require setting 2 breakpoints:
one for unvisible on large screens (set some very high number), and one for visible which would be the same point when your buttons become unvisible. Be sure to set the mobile auto switch to this point as well.

See my tutorial on using breakpoints for visibility control https://4hundert.de/rctips/visib...


segami
Registered User
Quote
2023-09-09 20:59:47

Thank you for your quick response Micaelo,

You are a star!

I had read your article previously, but did not think of using it like that for the navigation menu.

Works a dream.

Your tutorials are excellent.

Many thanks.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Int?rnational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact