Dropdown menu navigation with sticky...

User 2907842 Photo


Registered User
45 posts

Inger wrote:
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.


I appreciate your thoughts , and will take your advice. I've spent all day messing around with this so I'm probably going to do the same, and take a break.

Thanks again!
User 2699991 Photo


Registered User
4,782 posts
Online Now

daryl holtkamp wrote:
Inger wrote:
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.


I appreciate your thoughts , and will take your advice. I've spent all day messing around with this so I'm probably going to do the same, and take a break.

Thanks again!

Try giving the dropdown container "dropdown-pane" another additonal class name "position-bottom"

re-set all paddings margins you may have already done, first
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I've had another look, and I thought it best to start from scratch. See attached.

The problem with your files was that the distance from the font icon to the edge of the top container changed at every viewport because of wrapping contents, even several times within the same breakpoint.

So, what I've done is, and I don't know if you like it, especially with the awful colours I've used ;) , I started with a top container that I called 'parent' and gave it a fixed position. Inside it I have two containers, first-child-1 and -2. I have given them all a height, and the height of the parent has to be the sum of the kids' height.

In first-child-2 I placed everything pertaining to the dropdown plus the h1 text. This container got the height of 60px which suited quite well the size of the font icon. Make sure you watch the font size of the h1 element on small screens!

The other child is intended for the other elements you wanted to have in the heading. On small screens this content will wrap, and if more container height is needed, remember to adjust the height of the parent accordingly.

Then there is the container with the blue background, called ample-top-padding. It is sitting below the parent, not inside it. The top padding (don't use margin here!) must be at least as much as the height of the parent, because the parent's position is fixed, which will make the next container slide up behind it. So, the padding will make it come clear of the parent, so that its contents can be visible. Remember that if the parent's height is changed, the padding has to be changed too.

The current contents of the blue container are just filling stuff to make the page scroll.

It is possible, if you know your way around flex positioning, to make the contents of the header appear on one level for wide viewports instead of two. You would then maybe have to set a new breakpoint at a width where nothing wraps, and then use flex order, so that first-child-2 comes first. Then the parent height could be reduced to 60px. I haven't done this here, but it is not particularly difficult.
Attachments:
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

One more thing: You obviously started this project in RSD2.x but at some later time you have edited it in SD3. Unfortunately those two programmes share the same file extension, but once a project has been opened in SD3, you cannot go back to RSD. That was the problem I had initially, when trying to open it in RSD.
My suggestion above has been made in SD3, so you will have to go on editing it with that programme.
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

OK, so I made a suggestion with the flex order after all...
Attachments:
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

Wayan Jaya wrote:

Try giving the dropdown container "dropdown-pane" another additonal class name "position-bottom"

re-set all paddings margins you may have already done, first


After doing a bit of research I found that most of my issues were a result of the dropdown-pane behaving a certain way within foundation. Further research came to the conclusion. If I wanted to continue with the dropdown-pane route, getting the position I want would have to be achieved through attributes. Basically trial and error with [data-v-offset] and [data-h-offset]. Setting value a number in pixels. Although, becoming very tricky when wanting to work with a flex design.

Inger wrote:
OK, so I made a suggestion with the flex order after all...


I appreciate the time to help me get closer to my end results. This is very close to what i'm trying to achieve. Thank you very much for this.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

You're welcome! It would be interesting to see your end result, when you finally get there. Please post it for us to see! :)
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

Absolutely, this header-navigation layout is/was taking the most of my time. Your RSD file pushed me over this little hump that I was on. I just need to clean up the styling, designing, and I'll finally have a something I'm satisfied with.

I do have question not directly related to my topic, but about my header-navigation. I messed around slightly with form designer, getting ideas about how to do my search bar. It was becoming a slight headache getting it to look how I wanted. Then trying to put it inside RSD:V3. To continue moving forward used a form container, then put input text element inside of that. Results were lack luster. Mostly due to my unfamiliarity.

I was browsing your component sharing site, and really liked the search bar you used in [ Navigation -> CSD 3.x -> Collapsible menu (VA) ]. Unfortunately downloading it gave me 404 not found. That search bar with the font-icon submit is exactly what I wanted to do.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Sorry, I had made a typo in the link to the download. I have corrected it now.

But that search box isn't particularly functional, so I will change it tomorrow. I have found a better one here: https://cse.google.com/cse/
It walks you through it, then you can get the code, which has to be placed in SD3 in a html element.
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 got a bit carried away with this project, so I have an 'attempt3' for you.
I said last night that I had found a better search box than the one I have in one of the files in my sharing folder. It proved to be bulky and didn't fit into the top bar, so I had to work a bit on it. It was not difficult, but still a bit involved, so I inserted the search box with my changes, and here is what I did:

1. I went to the site https://cse.google.com/cse/ and found a button saying something like 'create a new search box' (The pages I open are in Norwegian, so I don't know exactly what the wording is in English).

2. I clicked on that button and had to type in which site I wanted to be searched. I typed 'www.coffeecup.com' and was asked to save and get the code.

3. The code I got was this:
<script>
(function() {
var cx = '003692994821310631992:vma0gnpmvec';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>


4. I changed the bottom line, the one after </script> to <gcse:searchbox-only></gcse:searchbox-only>

5. Then I added some custom styles in Settings - Head section:
<style>
.gsc-search-box table, .gsc-search-box td {
margin: 1px;
padding: 1px;
}
</style>


You can play around with the margin/padding, but don't give too much.

If there is a lot of space available for the search box, of course #4 and #5 can be ommitted, but in this case they were necessary.

So, then I added an HTML element to the project and pasted the code. That was it.

Of course, you may want a different site to be searchable, so you need to go through this procedure. I haven't checked if it is enough just to grab the new code for this line:
var cx = '003692994821310631992:vma0gnpmvec';
and replace it, but maybe.

Attachments:
Ha en riktig god dag!
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.