Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #189135
    motion2082
    Participant

    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?

    #189137
    robetnobe
    Participant

    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

    #189143
    motion2082
    Participant

    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!

    #189157
    motion2082
    Participant

    Ok I think I stuffed it good now, please help

    #189158
    Paulie_D
    Member

    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

    #189159
    motion2082
    Participant

    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.

    #189162
    Paulie_D
    Member

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

    #189229
    robetnobe
    Participant

    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

    #189231
    motion2082
    Participant

    Robert you are amazing!!!

    That fixed the menu :)

    #189232
    robetnobe
    Participant

    motion
    you could give an example tutorial convert html to joomla

    #189233
    motion2082
    Participant

    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

    #189234
    robetnobe
    Participant

    ok thanks motion :)

    #189236
    motion2082
    Participant

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

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

    #189237
    robetnobe
    Participant

    Thanks motion :)

    #189239
    motion2082
    Participant

    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?

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.