Hi guys!
I'm having problems making a simple drop down menu with SD 4 and Bootstrap. What I want is button links, with text in the buttons. Not text links within the buttons/list items where the list item itself is not a link.

If I use UL for the structure and text within the list items, then only the text can be a link, not the resulting box (list item) the text is in.
If I use a Ul List then I can't nest the drop down within another List Item so the drop down does not work.
If I use buttons, then again no nesting is possible.

is there an easy way to do this?
Any tips much appreciated!

I have some menus that I have created here: https://eikweb.com/sharing. Click on Navigation, and take a look at the first 5 menus (with (BS) behind the name). Don't worry that is says SD3 above the column, they work for newer versions too.

Wow that's a very exstenxive resourse you have there! Thanks for sharing!
This one https://eikweb.com/sharing/sd3-dropdown … ndex.html#
Is showing exactly my problem, only the text in those drop down buttons, are links. Is there a way to make the whole list item/ button into a link and not just the text?

Thanks very much for sharing that page. Ive book marked it and will use it as reference. Can't help thinking that a little Seo on it would bring you lots of traffic.

All the best to you

I guess you could replace the text links with button links. I haven't got time to try that right now, but I took that menu you were interested in and made an effect so that it may look like buttons. Just a simple gradient, and the opposite way for the hover state. Maybe this is something you can use?

Hi Barry,

I use Easy CSS Menu and it will do exactly what you want. I know yo want to do it in SD, me too. But I am not a skilled user so I turn to things that I can actually do. The resulting HTML integrates easily into an HTML container, with a few additional files uploaded to your root directory. Here is a site I am working on that has the menu:
https://africanwildlifebymichelle.com

Place a link container in the list item. place a button in the link container

or

you could use the ready-made component "standard nav bar" & restyle it to your needs

here is a short silent movie for demo purposes only it's not a how to do it video, just intended to show something that can be done using the bootstrap ready-made component "standard menu" in the components library

https://youtu.be/-nP1f-mM4DM

Thanks very much everyone for the tips and help, much apprecaited.

I've found that component and it looks like the way to go. One immediate problem I'm having is over riding the default design css. For example, the blue background is tagged '!important' in the bootstrap css file. Any css style I add to the menu has no effect at all, not just the background but text colour etc.

Ive tried adding a new class after the default bootstrap css classes in the design panel, but this doesn't override the default styles. I've also tried disabling temporarily the default styles by clicking on them so they go dark, leaving my additional class as the only one highlighted (presumably meaning that only that class is being edited?) but this has no effect. I dont want to edit the default boostrap css file as I'm assuming that will be overwritten on export.

Anyone know what I'm missing? How can I override that blue background colour !important style?

Thanks guys

I Know
To change the colour of the background simply delete the class "bg-primary" for the main container. then choose your background colour as you desire

To change the colour of the text-links select one and add an additional class name (white) set the font colour to "white"

add the additional class name to the other text-links as desired,, or add an additional class name (yellow) to one or all of the others
set the font colour to yellow