Issue converting a site's menu to Bootstrap

I am attempting to convert a site to use Bootstrap. This site was designed by a third-party in 2010 and is no where near responsive. I wanted to redo the layout using Bootstrap 3 and started by taking a static page (it is generated from ExpressionEngine) and start the conversion process so I can then reformat my templates.

I'm having issues converting the menu styles.

This is the type of menu I want to use:

But I want the colors, fonts, etc to match the menu here:

Also, I cannot get the dropdown to work at all. The only menu items that have dropdowns are Courses and Dues.

Can anyone help out with this one? I think I can handle the rest of the site, it's just that this menu is driving me nuts.
LVL 27
Eddie ShipmanAll-around developerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For colors, did you see the jqueryslidemenu.css
/*Top level list items*/
.jqueryslidemenu ul li{
	position: relative;
	display: inline;
	float: left;
.jqueryslidemenu ul li a{
	margin: 0 9px;
.jqueryslidemenu ul li ul li a{
    font-family: Helvetica, Arial, sans-serif;

/*Top level menu link items style*/
.jqueryslidemenu ul li a.selected{
	border-top:3px solid #f0ae00;
.jqueryslidemenu ul li a{
	color: #646464;
	display: block;
	text-decoration: none;

.jqueryslidemenu ul li ul li a {
	 /*IE6, IE7 hack to get sub menu links to behave correctly*/
 	*display: inline-block;
.jqueryslidemenu ul li a:hover{
	color: #D18716;
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
	position: absolute;
	left: 0px;
	display: block;
	visibility: hidden;

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
	background-color: #f4f8fb;
	background-image: url(/images/menu_bg.png);
	background-repeat: repeat-y;
	background-position: right;
	display: list-item;
	float: none;
	border-right:1px solid #7e858a;

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a, .jqueryslidemenu ul li ul li p{
	margin: 0;
	border-bottom: 1px solid #bac5cc;
	line-height: 27px;
	background-image: url(/images/menuArrowYellow.png);
	background-repeat: no-repeat;
	background-position: right;

.jqueryslidemenu ul li ul li a.noarrow{
	background: transparent;

.jqueryslidemenu ul li ul li a:hover, .nav_subhover {
	 /*sub menus hover style*/
	 color: #ffffff !important;
	 background-image:none !important;
	 background-color:#494949 !important;

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul {
	background-color: #494949;
	width: 285px;

.jqueryslidemenu ul li ul li ul li{
	background: none;
	border: none;

.jqueryslidemenu ul li ul li ul li a{
	border: none;
	line-height: 28px;
	background-image: url(/images/menuArrowGrey.png);
	background-repeat: no-repeat;
	background-position: left;

.jqueryslidemenu ul li ul li ul li a:hover {
	border: none;
	line-height: 28px;
	background-color: #D18716 !important;

.submenu          { border:1px solid #cccccc;}
.mainitem         { }
.mainitemhover    { border-bottom:6px solid #95ca00;}
.mainitemselected { border-bottom:6px solid #95ca00;}

Open in new window

Eddie ShipmanAll-around developerAuthor Commented:
I am fully aware of what the color values  end to be.  That is not my issue.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Eddie ShipmanAll-around developerAuthor Commented:
I do not want to change to any bootstrap designed components or widgets. I want the new site to have a bootstrap layout. I'm having issues with the menu at this time.

I think the problem here is that anyone posting has not even looked at the site.
Eddie ShipmanAll-around developerAuthor Commented:
After some updates, I have gotten the colors and alignment fixed. But now, I can't figure out why the fonts are't correct and I do not know why the dropdowns won't work.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What I would do is start with the navigation that does work with the same html.  Just quickly the nav classes are slightly different.  That might not even make a difference but it could be a clue.

header-navigation pull-right font-transform-inherit
header-navigation pull-left font-transform-inherit

Then get rid of any css that targets the header-navigation area in the site that does not work.  Then add the css from the site that does work to a separate css file for now and load it as the last css file.  Maybe call it nav.css.  You can always put it in with your sytle.css later.  It will be easier to trouble shoot.

When I use the browser console, I can see differences.  Rather than spending a lot of time to reinvent the wheel, I think this will be a quick solution.  Once working, you can make minor adjustments to things like font size and color.
Eddie ShipmanAll-around developerAuthor Commented:
I don't want to use the jqueryslidemenu plugin so I do not want to just use the one that is working on the old site and modify the classes.

As I said, I have all the colors working, just having issues with the fonts and not understanding why the dropdowns do't dropdown.

Regarding the dropdown
You should add the class to Courses
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Courses <span class="caret"></span></a>

Open in new window

See Bootstrap example:

<li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>

Open in new window

Regarding the font this seems ok if we remove font-transform-inherit from the DIV.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>This is the type of menu I want to use
>I don't want to use the jqueryslidemenu plugin

The navigation is not dependent on jquery.  It is dependent on bootstrap.css and style.css.  I just loaded the page and removed all the js files and other css files except for bootstrap and style and the menu worked.

>But I want the colors, fonts, etc to match the menu here
You will add colors and fonts to css file you use for customization.
Eddie ShipmanAll-around developerAuthor Commented:
Yes, I know the menu works on the metronic/frontend/index.html. It is the files/scic_main.html that I'm having the issues with.

I want the same type of menu that is on the metronic page to work on the scic_main page with the colors an fonts on the scic_main page.

Apparently the fonts are now working but even with the change that lenamtl suggested above, the drop down still doesn't work.
Eddie ShipmanAll-around developerAuthor Commented:
@lenamtl  Was it not apparent that that nav was not a Bootstrap navbar?
Do you want it to convert it to Bootstrap or not?
This is confusing....
Eddie ShipmanAll-around developerAuthor Commented:
The site is going to be converted to Bootstrap framework but the menu on the metronic page IS NOT a Bootstrap Navbar.
Did you even look at either of the pages?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
We have given you good advice on what to do and it seems like you are just getting frustrated.   Did you even try the suggestions?
Eddie ShipmanAll-around developerAuthor Commented:
Yes, I did, and the drop down still doesn't do anything. Did you even look at the sites? I update the scic_main page each time I use one of your suggestions.

I copied the entire header-navigation from the metronic page to the scic_main page and even found that some selectors were not in the CSS so I copied them to the styles.css and it still isn't working.

The appearance looks ok, so far, it is just that the menu isn't working.
Eddie ShipmanAll-around developerAuthor Commented:
I think I may just start over and try to make the jqueryslidemenu work as the other one.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eddie ShipmanAll-around developerAuthor Commented:
Starting over, not using any solutions from this question
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.