Starting to use SD3 now.
(Background: Experienced RSD user with good understanding of coding)
Eventually decided to build my first website with Foundation framework.
Task One: Make a good nav menu.
I have followed the menu making tutorial.
Discovered there are simple steps omitted that would trip up a beginner for sure!
For example when setting the Hamburger, it is not clear in the tutorial how to change the image of the Hamburger graphic.
I figured it out. However, a beginner to SD3 might not do this too easily. An extra sentence about this in the tutorial would help.
Then the tutorial does not explain why so many containers are needed (in a way a beginner or new user would understand).
Next issue: while I have assembled a menu and it works well regarding 'responsiveness', I am baffled as to why formatting selections such as background colour, underlining text link item when under focus and changing colour for hover are being ignored. The CSS seems fine. What am I missing?
Some of these issues could relate to the fact that I am new to Foundation as much as SD3.
Can anyone comment briefly with a suggestion how to get this menu styling working within the instructions of the CC SD3 menu-building from scratch tutorial? Ref: https://www.coffeecup.com/help/articles/create-a-nested-menu-from-scratch/
If you know a better tutorial or video to cover these issues, please share!
TIA
Daniel
Daniel Walsh
Registered User
94 posts
Phil Dias
Registered User
260 posts
Are the styling issues being ignored for higher breakpoints of or mobile view also?
Regards
Regards
Daniel Walsh
Registered User
94 posts
Hi Philip,
They are being ignored for both mobile size and higher.
If I turn on developer tools in the browser and click on the menu items I can see the style change for about 1 second and then go back to vanilla (no styling).
But I am trying to get the CC tutorial to work as it should before I do my own thing!
I have looked at your menus also - they work well!
Your site looks like a better Wordpress theme. Well done you!
They are being ignored for both mobile size and higher.
If I turn on developer tools in the browser and click on the menu items I can see the style change for about 1 second and then go back to vanilla (no styling).
But I am trying to get the CC tutorial to work as it should before I do my own thing!
I have looked at your menus also - they work well!
Your site looks like a better Wordpress theme. Well done you!
Inger
Senior Advisor
14,647 posts
Online Now
Daniel, I don't know if this helps, but check my sharing folder, url in my signature. The first menu in RSD is the same as the first one in CSD, I have just converted it - replaced rows and columns with containers. It was originally built in RSD, foundation section. I built the menu following the instructions in the article you are referring to.
The minimal styling I have done (just giving the main, sub and subsub items different colours) was just to keep track of what was what while building it. It shouldn't be difficult to apply more styling to those menus.
You can download the project files (NB! they both have the .rsd extension, so maybe keep then in different folders) and check out the differences. Just holler if you have questions.
The minimal styling I have done (just giving the main, sub and subsub items different colours) was just to keep track of what was what while building it. It shouldn't be difficult to apply more styling to those menus.
You can download the project files (NB! they both have the .rsd extension, so maybe keep then in different folders) and check out the differences. Just holler if you have questions.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Phil Dias
Registered User
260 posts
I may have misunderstood but are you working with the vanilla framework? If so, surely a foundation framework navigation menu wouldn't work with the vanilla framework as the correct styles wouldn't be in the CSS.
Daniel Walsh
Registered User
94 posts
Thanks Inger,
I will download and look at those - it seems you have a good library of goodies there!
Daniel
I will download and look at those - it seems you have a good library of goodies there!
Daniel
Daniel Walsh
Registered User
94 posts
Hi Inger,
I notice you hardcoded and placed CSS for hover and underlining the menu items in the <head> of the page.
Did you find that these could not be selected in the UI of SD3?
Is there any technical reason for placing this CSS in the <head> rather than in a .css file?
Is it considered as above the fold content? If so, it is clever!
I never considered doing this for the nav styling before.
It might help keep the big G happy!
Best wishes,
Daniel
I notice you hardcoded and placed CSS for hover and underlining the menu items in the <head> of the page.
Did you find that these could not be selected in the UI of SD3?
Is there any technical reason for placing this CSS in the <head> rather than in a .css file?
Is it considered as above the fold content? If so, it is clever!
I never considered doing this for the nav styling before.
It might help keep the big G happy!
Best wishes,
Daniel
Daniel Walsh
Registered User
94 posts
Hi Philip,
vanilla as in 'plain'
and not
Vanilla as in framework!
vanilla as in 'plain'
and not
Vanilla as in framework!
Phil Dias
Registered User
260 posts
Daniel Walsh wrote:
Hi Philip,
vanilla as in 'plain'
and not
Vanilla as in framework!
Hi Philip,
vanilla as in 'plain'
and not
Vanilla as in framework!
No worries abs thank you for your original compliment. Much appreciated.
Inger
Senior Advisor
14,647 posts
Online Now
Daniel, the reasons why I hard-coded the css bit, were that I found it somewhere on the web and just applied it as I found it,
and,
I didn't know how to write '::after', and 'calc(100% - 0.125rem);' in RSD. I still don't know, and I'm fairly new to SD3 and haven't yet investigated if it would be possible there. If you find out, please tell me!
and,
I didn't know how to write '::after', and 'calc(100% - 0.125rem);' in RSD. I still don't know, and I'm fairly new to SD3 and haven't yet investigated if it would be possible there. If you find out, please tell me!
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.
