Dropdown menu navigation with sticky...

User 2907842 Photo


Registered User
45 posts

Hello,

I'm trying to work with a toggle drop down menu, but 'm having a bit of trouble getting it to display correctly.
I have a container housing a font icon ( toggle ) and the container that is to be my drop down.
The toggle function is working almost completely how I intend. Although, when toggling the menu no matter what I seem to change in terms of dimension, etc. The navigation menu is always directly under the font icon. Clipping into the header top bar. The end results to have the toggled menu flush with sticky header, and the left hand side of the page
I'm still learning all the details with classes / attributes / fine tuning the small things.

Any help or pointing me in the right direction would be greatly appreciated

Thank you!

Clarification:
https://i.imgtc.com/9hHwJbv.png
Not toggled

https://i.imgtc.com/OvhnlLv.png
toggled
User 2907842 Photo


Registered User
45 posts

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

It would be good if you could post your project file, or pop it into your dropbox if the file is too big, so that we can see your settings/styling. Otherwise all we can do is make guesses.

Edit: OK, I see you have posted it. Downloading now...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Daryl, which programme are you using? RSD2.5 or SD3? You are posting this in the RSD forum, but when I try opening the file in RSD, I get an error saying Invalid file.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I found that you are using SD3, so I will move this discussion to the Site Designer forum.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

If you give the font icon a bottom padding of about 10-12px, it should be ok.

BTW, there is a custom.css file referenced in the settings, but that file is missing.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2907842 Photo


Registered User
45 posts

Inger wrote:
If you give the font icon a bottom padding of about 10-12px, it should be ok.

BTW, there is a custom.css file referenced in the settings, but that file is missing.


Thank for the quick reply, and moving my post to the correct location.

I made a component of the sticky header: imported in to a new blank template. I tired attaching it to the post, but was getting an error mentioning that it's not of the support file formats. Even though it is an .RSD file saved from RSD:V3. Here's a link to google drive https://drive.google.com/file/d/1Cy7095SiP84CrKuxGL10eGkt2N9tqRGq/view?usp=sharing

I'm going to use your suggestion about giving the fonticon a bottom padding. Will report back.
User 2907842 Photo


Registered User
45 posts

Using the most recent RSD file I shared. Giving the fonticon a bottom padding ( 20 px ). Seemed to work ever so slightly, but only seemed to stretch out sticky header, and never giving the appearance that the menu navigation was a separate entity from the sticky header.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

It's late here now, so I will not look at it until the morning. I forgot to say that you probably will have to experiment with a bit different bottom paddings at each breakpoint.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2907842 Photo


Registered User
45 posts

I also tired various things, such as giving the drop down menu a top margin. Which gave the illusion of it doing that I wanted. Although when previewing the results. Nothing I did seemed to have an effect.

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.