Best Inger

Since that SD3 no components and that you are obliged to design them yourself which is very time consuming and definitely not efficient to work. I am trying to bootstrap navbar designs according to the website of bootstrap but some css3 properties are not accessible. Can you give me that navbar designs and integrate into my website.

Best regards
Stephane

What you forget is, creating a menu can be quite time consuming for me too!
Having said that, I have some ready made ones, click on the sharing folder (link in my signature), go to the right-most column where is says CSD 3.x. There are two menus made in the Bootstrap system, see the 'BS' after the name. See if you can use one of them. If you can, download it, open it in SD3, save it as a component and then add it to your site. I have written what to select for creating components.

When you say you want to try 'the bootstrap NavBar...' I don't know which navbar you mean. If you mean something other than what I have, you have to tell me where to find it.

Inger

This is the code from the custom bootstrap navbar

<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient">
<div class="container"><a class="navbar-brand logo" href="#">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse"
id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="projects-grid-cards.html">Projects</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="hire-me.html">Hire me</a></li>
</ul>
</div>
</div>
</nav>

In attachtment how to look like to see the navbar on different screen sizes

Kind regards

Isn't that the same as my black menu in my sharing folder? Only that there are no dropdowns and the menu items are right aligned?
I take it you are able to change the colours and the text yourself.

Inger,

I try to insert your navbar as a component created in my website but I can't this.

Can you even in my project that insert navbar and that I can study after

Thank you

Inger,

Can you build the navbar with nav bar "Brand" + navbar "Logo" in image as logo for you company and with dropdown links
Like this:

a) With logo in image
================
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

b) With dropdown links in the navbar
============================
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>

Kind regards
Stephane

You obviously didn't take the hint about this being time consuming for me too...

You may have inserted the component correctly, but then probably forgotten that you had positioned the top container fixed, so that the menu may have been hidden under it.

See if the attached suits you.

Inger

I understand your and respect that

Kind regards
Stephane

Hi Inger,

I've seen from your file that you've used three Type Classes for your menus. My question is I've seen the list of Type Classes listed in the drop-down. You chose those three, but for me as having never been exposed to CSS before (from Serif WebPlus) how to I know what they all mean so I can the right (no just for menu). Is there a manual of Layout Classes or Bootstrap classes?

Many thanks

When you asked for a manual...

Here is the Bootstrap documentation:
https://getbootstrap.com/docs/4.1/getting-started/introduction/

Drill down to "Components" in the side panel.

You will have to translate the structures, elements, classes, and attributes in the documented examples into the CoffeeCup elements available in SD.

Hope this helps...