Menu

User 2903050 Photo


Registered User
260 posts

Hi everyone, a few people have taken interest in looking at the source code etc of my menu built in the foundation framework. Below is a link to the page that shows the menu. The page for reference has a css grid layout behind but the menu is completely independent of the grid so can be used without Grid.

http://phildias.com/master.html

As making a menu in Coffeecup is quite challenging especially for me, (only been a coffeecup user for less than a month) I thought I'd share the project file to help others in the coffeecup community. The colors, fonts, links etc are all editable so you can create something to your liking. If you need any help, post away.
Kind regards,
Phil
Attachments:
User 122279 Photo


Senior Advisor
14,450 posts

Hi Phil,

Your menu looks good. I have a question about that hamburger menu icon. I opened the menu in SD3 and clicked on various elements to see their properties, and when I clicked on that icon (small screen), all of a sudden I had two of them. clicked again and got yet another. I found that the 'box' showing the element and its parents appeared outside, or almost outside the small screen viewport. Only a wee bit of it is visible, and before you know it, you have clicked on duplicate, or delete, which appears just below duplicate. I wonder if that is something in the programme itself, or if you have had any influence on where that box appears.
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 2903050 Photo


Registered User
260 posts

If you go on the Elements Tree Pane. Find the container with the class .container-1. Select it and then from the styles pane you can change the layout of the container with the font icons and logo placed in it. I have used flex and justified to "space between" which is why the menu burger is fully over to the right.
Is that what you mean?

Kind regards,
Phil
User 122279 Photo


Senior Advisor
14,450 posts

Yes, that is what I mean. I'm aware that I can find that element in the element list. I'm not after changing anything. The reason why I'm asking is, that in RSD that 'box' is full visible in the work space, also if an element is smack bang right aligned. So then that will have to be fixed by CC, I guess...
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 244626 Photo


Registered User
811 posts

Inger wrote:
Yes, that is what I mean. I'm aware that I can find that element in the element list. I'm not after changing anything. The reason why I'm asking is, that in RSD that 'box' is full visible in the work space, also if an element is smack bang right aligned. So then that will have to be fixed by CC, I guess...


I would agree. The small popup tool should align differently.
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

My apologies, I understand now. Yeah it should be visible, I'll have a look on rsd2.5 and see if it's different.
Regards
User 283347 Photo


Registered User
388 posts

Is this only for SD 3? Rsd 2.5 says invalid file
User 2903050 Photo


Registered User
260 posts

User 122279 Photo


Senior Advisor
14,450 posts

Phillip Dias wrote:
My apologies, I understand now.
Regards


You don't have to apologise, Phil :) This is something that CC need to fix, it's not your fault. I was just asking initially, before I checked it properly. I have reported it to the company, and we'll see what they say.
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 2903050 Photo


Registered User
260 posts

I was apologising as I thought I offended you. Of course you'd know how to change the placement of the menu button etc. Now you say about the font icon link tab being squashed, it does look strange! :lol:
Regards Phil

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.