How to create an navigation menu...

User 131545 Photo


Registered User
687 posts

Dear support,

I started with given code by example and I build this in the visual way with the site designer. What are the roadmap how I can do that. Witch containers do I use (kind of containers such the link container, list container).
Can somebody help my how I can this visual into Site Designer.

here is the code from start:


<!-- Navbar -->
<nav class="navbar-expand-md navbar-dark bg-dark navbar fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar3SupportedContent">
<ul class="navbar-nav">
<li class="nav-item mx-3">
<a class="nav-link text-light" href="#"><b>PINGENDO</b></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#menu"><b>MENU</b></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#venue"><b>VENUE</b></a>
</li>
</ul>
<a class="btn navbar-btn btn-secondary mx-2" href="#book"><b>BOOK</b></a>
</div>
</div>
</nav>


Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,454 posts

That looks like part of the code for a standard Bootstrap navbar. Building it in SD is not complicated. Use a normal container where you see a div in the code. Only, the div for the ul (class navbar-nav) should be a list-container.
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 187934 Photo


Senior Advisor
20,190 posts
Online Now

Make sure you check out the components in your library. I think there are 12 examples in there.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2954033 Photo


Registered User
3 posts

How do you get the menu and footer to be on all my pages?
User 187934 Photo


Senior Advisor
20,190 posts
Online Now

Hi David,
Use the symbols feature.
https://www.coffeecup.com/help/articles … h-symbols/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2905946 Photo


Registered User
17 posts

Is there a way that you can convert some of the components and layouts you see here on the bootstrap examples page into Site Designer components?

https://getbootstrap.com/docs/4.1/examples/#content

I'm particularly interested in using this carousel layout. https://getbootstrap.com/docs/4.1/examples/carousel/

I know I could save the code, and then rebuild it in Site Designer, but I thought there might be an easier way that I'm missing.
User 2699991 Photo


Registered User
4,803 posts

Judi Phelps wrote:
Is there a way that you can convert some of the components and layouts you see here on the bootstrap examples page into Site Designer components?

https://getbootstrap.com/docs/4.1/examples/#content

I'm particularly interested in using this carousel layout. https://getbootstrap.com/docs/4.1/examples/carousel/

I know I could save the code, and then rebuild it in Site Designer, but I thought there might be an easier way that I'm missing.

I believe there is a bootstrap carousel similar to the example already in your components library, as to the other examples I wouldn't know as I don't use bootstrap, but it would be possible to make something similar I would imagine, as I would be able to do that in "foundation" by making the componet from scratch
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 2905946 Photo


Registered User
17 posts

Thanks, Yes I saw that Carousel and was going to use it as a component. I just saw this layout, among others and wondered if there were a way to make it work.

I'll give it a try from scratch. it shouldn't be difficult.
User 122279 Photo


Senior Advisor
14,454 posts

I made this carousel just recently. If you find it useful, feel free to use it.
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.