[Solved] Need my Bootstrap CSS menu to look like this

[motion2082]

Hey guys,

I’m new here so please be nice.

I am working on converting a html website to a joomla cms.

The html version is at http://tinyurl.com/kyfsjpq

and here is what I have created so far http://tinyurl.com/p2le55u

Can anyone please help me with a custom.css override for the Menu on the left with the light green background color?

[robetnobe]

you just add in the code css
.nav-stacked > li > a {
margin: 0px 10px;
}
.nav-stacked > li.active > a {
background: url(‘menu3.jpg’) no-repeat scroll right center #BCD4C7
}

please try it first

and
header for joomla
add code css custom
header.header img {
width:100% !important;
}

You can teach me to be able to convert html to joomla

[motion2082]

Hi Robert,

Thank you for your quick reply.

That code fix the padding issue and also makes the button active which is good.

It’s not displaying the (menu3.jpg) though :(

Having a play around now :)

I’m still learning with Joomla but I can definitely share my trial and error experiences!

[motion2082]

Ok I think I stuffed it good now, please help

[Paulie_D]

I’d suggest you create a smaller version in Codepen we can play with as your developments site is a moving target.

Frankly, I think the issue was your background images on your list items / links.

There’s nothing in the ‘proper’ site nav that can’t be done without them.

http://codepen.io/Paulie-D/pen/PwqpYB

[motion2082]

I’m not sure how to do that as my testing site is Joomla not HTML/CSS only so won’t play nice in code pen.

[Paulie_D]

Simply use your output HTML. in fact, my Codepen does use your HTML

[robetnobe]

you are wrong in writing string should look like this back
.nav-stacked > li.active > a {
background:url('menu3.jpg') no-repeat scroll right center #BCD4C7;
}
motion you can teach me how to convert html to joomla

[motion2082]

Robert you are amazing!!!

That fixed the menu :)

[robetnobe]

motion
you could give an example tutorial convert html to joomla

[motion2082]

Robetnobe

Step 1) Install Joomla on your webserver

Step 2) Navigate to protostar template css folder @ www/templates/protostar/css

Step 3) Create a custom.css file

Step 4) Add this line to the index.php file

// Add Stylesheets

$doc->addStyleSheet('templates/' . $this->template . '/css/custom.css');

Step 5) Copy code you want to modify from templates.css into custom.css

Step 6) Enjoy

[robetnobe]

ok thanks motion :)

[motion2082]

This might be helpful also:
http://tinyurl.com/ozrlweu

You can find a free version here:
http://tinyurl.com/om668dn

[robetnobe]

Thanks motion :)

[motion2082]

You’re welcome,

Just added some sub menus to my menu and broke it :(

Who would have thought making a menu would be so hard?

What do those tags do?

[Author]

Posts