Trouble with CSS menu

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I am having trouble trying to implement a menu that I built with cssmenubuilder.com. It shows up fine in some templates but the one I want to use (Inky Night), has it all jumbled looking. Any Ideas
Photo of pittsburghsportsfan

pittsburghsportsfan

  • 13 Posts
  • 0 Reply Likes
  • undecided

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi pittsburghsportsfan,

I think that you may be attempting to place the code in your CSS over-rides? Possibly what's happening is that the hardwired divs of the inkynight template are too restrictive for your menu and it's forcing the displayed menu in to other places it fits. I would also check the code that you are placing in inkynight just to triple check that some element hasn't been screwed.

Without seeing the outcome I would think that you may have to manipulate the existing DIVS of Inkynight. A laborious and non-recommended process. It's not something that Yola could support you with and it could crash I daresay.

I would look at a less complex style and use the background images of inkynight to place in another less marked theme.
Photo of pittsburghsportsfan

pittsburghsportsfan

  • 13 Posts
  • 0 Reply Likes
Hi Gop, thanks for the response.

The code is placed in a html widget.

Here's the code:



<style>
/* Generated via www.cssmenubuilder.com */

.menu{margin:0; padding:0; width:200px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(156,89,89); display:block; background:url('resources/menu.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('resources/menu.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('resources/menu.png') 0px -80px no-repeat; color:rgb(0,0,0);}
.menu li a span{line-height:40px;}
</style>

<ul class="menu">
<li><a href="/home" class="active"><span>Home</span></a></li>
<li><a href="/services"><span>Services</span></a></li>
<li><a href="/about"><span>About</span></a></li>
<li><a href="/contact"><span>Contact</span></a></li>
</ul>


Here's what it's supposed to look like.



Here's what it looks like.

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
As it is showing I can't see that it's all jumbled?

At first I thought the background was missing but you were comparing two themes :)

I think that they are both showing correctly and taking the CSS fo the text menu from the style CSS.
Photo of pittsburghsportsfan

pittsburghsportsfan

  • 13 Posts
  • 0 Reply Likes
I guess my I didn't give you a very good picture, sorry about that.

I put black dots on the ends of the background image to better show what it's supposed to look like.

Here's the background image


Here's the examples



Thanks