Navigation Bar Trouble

Hello, I'm having problems with my navigation bar. I tried using the code here: https://help.forumotion.com/t91142-hover-nav-barsrep-asap
But when I put it in my CSS page I get a message that says "We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum."

Help please?
Thank you.

Hi there, can you post your entire CSS code via the

Code:

[code][/code]

Thanks!

To clarify, you need the code with the url's already in place?

Yes, I need the entire code on your CSS Spreadsheet.

Code:


NAV BAR

#_portal {_mini_index {
background-image: url('http://orig12.deviantart.net/e0b7/f/2016/289/0/3/portal1_by_blueeyedleader-dal85vk.png');
width: XYpx;
height: XYpx;
}
#_portal:hover {_mini_index:hover {
background-image: url('http://orig03.deviantart.net/7f1c/f/2016/289/1/6/portal2_by_blueeyedleader-dal85vg.png');
width: XYpx;
height: XYpx;
}
#_home_index {
background-image: url('http://orig15.deviantart.net/be03/f/2016/289/6/d/home1_by_blueeyedleader-dal85x1.png');
width: XYpx;
height: XYpx;
}
#_home_index:hover {
background-image: url('http://orig06.deviantart.net/9cf0/f/2016/289/4/b/home2_by_blueeyedleader-dal85ww.png');
width: XYpx;
height: XYpx;
}
#_members_index {
background-image: url('http://orig07.deviantart.net/1a62/f/2016/289/b/6/members1_by_blueeyedleader-dal85w8.png');
width: XYpx;
height: XYpx;
}
#_members_index:hover {
background-image: url('http://orig01.deviantart.net/7622/f/2016/289/d/6/members2_by_blueeyedleader-dal85w1.png');
width: XYpx;
height: XYpx;
}
#_groups_index {
background-image: url('http://orig01.deviantart.net/ccb9/f/2016/289/9/3/groups1_by_blueeyedleader-dal85xy.png');
width: XYpx;
height: XYpx;
}
#_groups_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_search_index {
background-image: url('http://orig10.deviantart.net/cb47/f/2016/289/7/5/search_by_blueeyedleader-dal85v0.png');
width: XYpx;
height: XYpx;
}
#_search_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_login_index {
background-image: url('http://orig05.deviantart.net/71c4/f/2016/289/5/e/log_in_1_by_blueeyedleader-dal85ws.png');
width: XYpx;
height: XYpx;
}
#_login_index:hover {
background-image: url('http://orig04.deviantart.net/5dd3/f/2016/289/f/8/log_in_2_by_blueeyedleader-dal85wo.png');
width: XYpx;
height: XYpx;
}
 #_logout_index {
background-image: url('http://orig11.deviantart.net/5861/f/2016/289/6/a/log_out_1_by_blueeyedleader-dal85wh.png');
width: XYpx;
height: XYpx;
}
#_logout_index:hover {
background-image: url('http://orig12.deviantart.net/7933/f/2016/289/c/a/log_out_2_by_blueeyedleader-dal85wf.png');
width: XYpx;
height: XYpx;
}
#_register_index {
background-image: url('http://orig00.deviantart.net/2413/f/2016/289/4/0/register1_by_blueeyedleader-dal85va.png');
width: XYpx;
height: XYpx;
}
#_register_index:hover {
background-image: url('http://orig02.deviantart.net/7dcf/f/2016/289/3/4/register2_by_blueeyedleader-dal85v7.png');
width: XYpx;
height: XYpx;
}


Thank you.

Mutated09 wrote:

Code:


NAV BAR

#_portal {_mini_index {
background-image: url('http://orig12.deviantart.net/e0b7/f/2016/289/0/3/portal1_by_blueeyedleader-dal85vk.png');
width: XYpx;
height: XYpx;
}
#_portal:hover {_mini_index:hover {
background-image: url('http://orig03.deviantart.net/7f1c/f/2016/289/1/6/portal2_by_blueeyedleader-dal85vg.png');
width: XYpx;
height: XYpx;
}
#_home_index {
background-image: url('http://orig15.deviantart.net/be03/f/2016/289/6/d/home1_by_blueeyedleader-dal85x1.png');
width: XYpx;
height: XYpx;
}
#_home_index:hover {
background-image: url('http://orig06.deviantart.net/9cf0/f/2016/289/4/b/home2_by_blueeyedleader-dal85ww.png');
width: XYpx;
height: XYpx;
}
#_members_index {
background-image: url('http://orig07.deviantart.net/1a62/f/2016/289/b/6/members1_by_blueeyedleader-dal85w8.png');
width: XYpx;
height: XYpx;
}
#_members_index:hover {
background-image: url('http://orig01.deviantart.net/7622/f/2016/289/d/6/members2_by_blueeyedleader-dal85w1.png');
width: XYpx;
height: XYpx;
}
#_groups_index {
background-image: url('http://orig01.deviantart.net/ccb9/f/2016/289/9/3/groups1_by_blueeyedleader-dal85xy.png');
width: XYpx;
height: XYpx;
}
#_groups_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_search_index {
background-image: url('http://orig10.deviantart.net/cb47/f/2016/289/7/5/search_by_blueeyedleader-dal85v0.png');
width: XYpx;
height: XYpx;
}
#_search_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_login_index {
background-image: url('http://orig05.deviantart.net/71c4/f/2016/289/5/e/log_in_1_by_blueeyedleader-dal85ws.png');
width: XYpx;
height: XYpx;
}
#_login_index:hover {
background-image: url('http://orig04.deviantart.net/5dd3/f/2016/289/f/8/log_in_2_by_blueeyedleader-dal85wo.png');
width: XYpx;
height: XYpx;
}
 #_logout_index {
background-image: url('http://orig11.deviantart.net/5861/f/2016/289/6/a/log_out_1_by_blueeyedleader-dal85wh.png');
width: XYpx;
height: XYpx;
}
#_logout_index:hover {
background-image: url('http://orig12.deviantart.net/7933/f/2016/289/c/a/log_out_2_by_blueeyedleader-dal85wf.png');
width: XYpx;
height: XYpx;
}
#_register_index {
background-image: url('http://orig00.deviantart.net/2413/f/2016/289/4/0/register1_by_blueeyedleader-dal85va.png');
width: XYpx;
height: XYpx;
}
#_register_index:hover {
background-image: url('http://orig02.deviantart.net/7dcf/f/2016/289/3/4/register2_by_blueeyedleader-dal85v7.png');
width: XYpx;
height: XYpx;
}


Thank you.

Hello @Mutated09,

The problem to the code above is to line 4 as i see the code. In there you have

Code: #_portal {_mini_index {

which has twice the symbol

Code: {

. Check the element once more and correct the entire thing with the correct element and one { and you should be fine!

I changed the code to this but it still isn't working.

Code:


NAV BAR
 
#_portal_index {
background-image: url('http://orig12.deviantart.net/e0b7/f/2016/289/0/3/portal1_by_blueeyedleader-dal85vk.png');
width: XYpx;
height: XYpx;
}
#_portal_index:hover {
background-image: url('http://orig03.deviantart.net/7f1c/f/2016/289/1/6/portal2_by_blueeyedleader-dal85vg.png');
width: XYpx;
height: XYpx;
}
#_home_index {
background-image: url('http://orig15.deviantart.net/be03/f/2016/289/6/d/home1_by_blueeyedleader-dal85x1.png');
width: XYpx;
height: XYpx;
}
#_home_index:hover {
background-image: url('http://orig06.deviantart.net/9cf0/f/2016/289/4/b/home2_by_blueeyedleader-dal85ww.png');
width: XYpx;
height: XYpx;
}
#_members_index {
background-image: url('http://orig07.deviantart.net/1a62/f/2016/289/b/6/members1_by_blueeyedleader-dal85w8.png');
width: XYpx;
height: XYpx;
}
#_members_index:hover {
background-image: url('http://orig01.deviantart.net/7622/f/2016/289/d/6/members2_by_blueeyedleader-dal85w1.png');
width: XYpx;
height: XYpx;
}
#_groups_index {
background-image: url('http://orig01.deviantart.net/ccb9/f/2016/289/9/3/groups1_by_blueeyedleader-dal85xy.png');
width: XYpx;
height: XYpx;
}
#_groups_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_search_index {
background-image: url('http://orig10.deviantart.net/cb47/f/2016/289/7/5/search_by_blueeyedleader-dal85v0.png');
width: XYpx;
height: XYpx;
}
#_search_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_login_index {
background-image: url('http://orig05.deviantart.net/71c4/f/2016/289/5/e/log_in_1_by_blueeyedleader-dal85ws.png');
width: XYpx;
height: XYpx;
}
#_login_index:hover {
background-image: url('http://orig04.deviantart.net/5dd3/f/2016/289/f/8/log_in_2_by_blueeyedleader-dal85wo.png');
width: XYpx;
height: XYpx;
}
 #_logout_index {
background-image: url('http://orig11.deviantart.net/5861/f/2016/289/6/a/log_out_1_by_blueeyedleader-dal85wh.png');
width: XYpx;
height: XYpx;
}
#_logout_index:hover {
background-image: url('http://orig12.deviantart.net/7933/f/2016/289/c/a/log_out_2_by_blueeyedleader-dal85wf.png');
width: XYpx;
height: XYpx;
}
#_register_index {
background-image: url('http://orig00.deviantart.net/2413/f/2016/289/4/0/register1_by_blueeyedleader-dal85va.png');
width: XYpx;
height: XYpx;
}
#_register_index:hover {
background-image: url('http://orig02.deviantart.net/7dcf/f/2016/289/3/4/register2_by_blueeyedleader-dal85v7.png');
width: XYpx;
height: XYpx;
}


You need to put 'NAV BAR' as a comment, like this...

Code:

/* NAV BAR */

Draxion wrote:You need to put 'NAV BAR' as a comment, like this...

Code:

/* NAV BAR */

Like this? It isn't showing up.

Code:

/* NAV BAR */
#_portal_index {
background-image: url('http://orig12.deviantart.net/e0b7/f/2016/289/0/3/portal1_by_blueeyedleader-dal85vk.png');
width: XYpx;
height: XYpx;
}
#_portal_index:hover {
background-image: url('http://orig03.deviantart.net/7f1c/f/2016/289/1/6/portal2_by_blueeyedleader-dal85vg.png');
width: XYpx;
height: XYpx;
}
#_home_index {
background-image: url('http://orig15.deviantart.net/be03/f/2016/289/6/d/home1_by_blueeyedleader-dal85x1.png');
width: XYpx;
height: XYpx;
}
#_home_index:hover {
background-image: url('http://orig06.deviantart.net/9cf0/f/2016/289/4/b/home2_by_blueeyedleader-dal85ww.png');
width: XYpx;
height: XYpx;
}
#_members_index {
background-image: url('http://orig07.deviantart.net/1a62/f/2016/289/b/6/members1_by_blueeyedleader-dal85w8.png');
width: XYpx;
height: XYpx;
}
#_members_index:hover {
background-image: url('http://orig01.deviantart.net/7622/f/2016/289/d/6/members2_by_blueeyedleader-dal85w1.png');
width: XYpx;
height: XYpx;
}
#_groups_index {
background-image: url('http://orig01.deviantart.net/ccb9/f/2016/289/9/3/groups1_by_blueeyedleader-dal85xy.png');
width: XYpx;
height: XYpx;
}
#_groups_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_search_index {
background-image: url('http://orig10.deviantart.net/cb47/f/2016/289/7/5/search_by_blueeyedleader-dal85v0.png');
width: XYpx;
height: XYpx;
}
#_search_index:hover {
background-image: url('http://orig15.deviantart.net/7a5b/f/2016/289/8/3/groups2_by_blueeyedleader-dal85xu.png');
width: XYpx;
height: XYpx;
}
#_login_index {
background-image: url('http://orig05.deviantart.net/71c4/f/2016/289/5/e/log_in_1_by_blueeyedleader-dal85ws.png');
width: XYpx;
height: XYpx;
}
#_login_index:hover {
background-image: url('http://orig04.deviantart.net/5dd3/f/2016/289/f/8/log_in_2_by_blueeyedleader-dal85wo.png');
width: XYpx;
height: XYpx;
}
 #_logout_index {
background-image: url('http://orig11.deviantart.net/5861/f/2016/289/6/a/log_out_1_by_blueeyedleader-dal85wh.png');
width: XYpx;
height: XYpx;
}
#_logout_index:hover {
background-image: url('http://orig12.deviantart.net/7933/f/2016/289/c/a/log_out_2_by_blueeyedleader-dal85wf.png');
width: XYpx;
height: XYpx;
}
#_register_index {
background-image: url('http://orig00.deviantart.net/2413/f/2016/289/4/0/register1_by_blueeyedleader-dal85va.png');
width: XYpx;
height: XYpx;
}
#_register_index:hover {
background-image: url('http://orig02.deviantart.net/7dcf/f/2016/289/3/4/register2_by_blueeyedleader-dal85v7.png');
width: XYpx;
height: XYpx;
}


Add it to the top of the CSS stylesheet.

It's still not working.

Do you exactly have numbers for the heights and widths?

This part?
width: XYpx;
height: XYpx;

Mutated09 wrote:This part?
width: XYpx;
height: XYpx;

Yes

I'm sorry, it still isn't working. Would it be possible for someone to play around with the code to make it work? Or can I add a menu that's already made from the Menu Maker website?

Head

Code:

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

HTML

Code:

<div id="cssmenu">
  <ul>
    <li class="active"><a href="http://the-tmnt-lair.forumotion.com/">Home</a></li>
    <li><a href="http://the-tmnt-lair.forumotion.com/portal">Portal</a></li>
    <li><a href="http://the-tmnt-lair.forumotion.com/memberlist">Members</a></li>
    <li><a href="http://the-tmnt-lair.forumotion.com/groups">Groups</a></li>
  </ul>
</div>

CSS

Code:

#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: auto;
  position: relative;
  display: block;
  font-size: 14px;
  font-weight: bold;
  background: #4f4646;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #4f4646;
  zoom: 1;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0 4px;
}
#cssmenu li a {
  display: block;
  float: left;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px 7px 20px;
  border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
  color: #8ab34d;
  border-bottom: 3px solid #8ab34d;
}
#cssmenu li.active a {
  display: inline;
  border-bottom: 3px solid #8ab34d;
  float: left;
  margin: 0;
}