Joomla Templates Club 406,261 posts

[shipit Friend shipitJoin date: August 2008Posts: 6Downloads:0Uploads:0 Thanks: 6]

#133364

We use some rather long names in our menu and this causes the items to go outside of the semi-transparent dropdown area. We even had to use the smallest font just to keep the top-menu items inside the menu. My question is: How do we change the width of the menu items (specially the dropdown area) so we can use a larger font. We have been searching all over in the css but were not able to figure out where to make the changes. And, is there a way to move the entire menu further to the left (or any way to specify the (start / left)position) Please help!

Our website: http://www.shipit.eu

Info about the site setup: Moo menu, wide screen, font size = 1, joomla ver. 1.5.5
Template changes: New Logo and changed the dark-gray menu bar (image) and removed the bar-code from the left. (image)
Css changes: Menu bar changes color to red rather than black on mouse over.

Thank you for helping! 🙂

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#270721

Hi
you can edit ja-sosdmenu.css (line 116)(/templates/ja_drimia/ja_menus/ja_cssmenu folder)

#ja-cssmenu li a.active, #ja-cssmenu li a.active:hover, #ja-cssmenu li a.active:active, #ja-cssmenu li a.active:focus {
background:#333333 none repeat scroll 0 0;
color:#FFFFFF;
}
#ja-cssmenu li a {ja-sosdmenu.css (line 82)
border-left:1px solid #666666;
border-right:1px solid #333333;
color:#CCCCCC;
display:block;
font-size:115%;
font-weight:bold;
line-height:44px;
margin:0;
padding:0 20px;---> you can edit here, change 20px as you want
text-decoration:none;
}
About sub menu item
you edit ja-sosdmenu.css (line 41)

#ja-cssmenu li ul {
height:auto;
left:-999em;
position:absolute;
width:15.9em;--> edit here
z-index:99;
}

And ja-sosdmenu.css (line 54)

#ja-cssmenu li li {
margin:0;
padding:0 1em 0 0;
width:14.9em;
}

[shipit Friend shipitJoin date: August 2008Posts: 6Downloads:0Uploads:0 Thanks: 6]

#270774

Thank you for the help, nguoiabcd. I still have the problem, though, about the font size. If I try and enlarge the font, say from 115% to 120% (actually there is no difference between 117% -> 120%) then the text will exceed the borders on the right side of the menu. This could probably be solved if there were a way to move the entire menu further to the left and into the “huge” dark and empty area on the left side of the menu (left of HOME) … where I removed the bar-code from the background image. IS there a way to move the whole menu further to the left ? I would very much appreciate your help. Thank you in advance!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#270790

You can edit template.css (line 1206)

#ja-mainnav {
bottom:36px;
height:44px;
left:30%;--> change 30% to lower
position:absolute;
z-index:10;
}

2 users say Thank You to Sherlock for this useful post

1. shipit
2. iainmac

[shipit Friend shipitJoin date: August 2008Posts: 6Downloads:0Uploads:0 Thanks: 6]

#271037

<em>@nguoiabcd 80196 wrote:</em><blockquote>You can edit template.css (line 1206)

#ja-mainnav {
bottom:36px;
height:44px;
left:30%;--> change 30% to lower
position:absolute;
z-index:10;
}
</blockquote>
Hello nguoiabcd,
I have changed the text in the FOOTER of our website (http://www.shipit.eu) but also wanted to put a “mailto” link in there, however, the HTML mailto does not work. Is there a way (or an extention) to put a mailto link there? Best Regards,

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#271094

hi
you can add like this

<a href="your mail">your mail</a>

1 user says Thank You to Sherlock for this useful post

1. shipit

[shipit Friend shipitJoin date: August 2008Posts: 6Downloads:0Uploads:0 Thanks: 6]

#271884

<em>@nguoiabcd 80585 wrote:</em><blockquote>hi
you can add like this

<a href="your mail">your mail</a>
</blockquote>
Hi again. I tried the <a href=”your mail”>your mail</a> but it didn’t work. However, if you add the mailto (<a href=”mailto:your mail”>your mail</a>) it will work.

I am still facing some problems with my menu-bar, though (http://www.shipit.eu). If you look at the layout, the menu-bar is placed to far to the left and not vertically aligned with the main area (and the light gray bar below the menu-bar) I wonder if there is a way to adjust the menu-bar up and down and left and right to your satisfaction? Thank you for your reply!
PS: I believe it is only the background image that needs to be moved, right?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#271917

You can edit css for menu here:template.css (line 1206)

#ja-mainnav {
bottom:36px;
height:44px;
left:30%;
position:absolute;
z-index:10;
}
And background template.css (line 1146)

#ja-header {
background:transparent url(../images/head-bg_NEW.jpg) no-repeat scroll 0 60px;
height:140px;
position:relative;
z-index:999;
}

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#271918

You can edit css for menu here:template.css (line 1206)

#ja-mainnav {
bottom:36px;
height:44px;
left:30%;
position:absolute;
z-index:10;
}

And background template.css (line 1146)

#ja-header {
background:transparent url(../images/head-bg_NEW.jpg) no-repeat scroll 0 60px;
height:140px;
position:relative;
z-index:999;
}

1 user says Thank You to Sherlock for this useful post

1. shipit

[shipit Friend shipitJoin date: August 2008Posts: 6Downloads:0Uploads:0 Thanks: 6]

#272062

<em>@nguoiabcd 81597 wrote:</em><blockquote>You can edit css for menu here:template.css (line 1206)

#ja-mainnav {
bottom:36px;
height:44px;
left:30%;
position:absolute;
z-index:10;
}

And background template.css (line 1146)

#ja-header {
background:transparent url(../images/head-bg_NEW.jpg) no-repeat scroll 0 60px;
height:140px;
position:relative;
z-index:999;
}
</blockquote>
Hi
Thank you for your reply. Unfortunately I cannot make it work :confused: I can move the menu allright and although it uses % I was able to align it more or less the way we wanted, however, I cannot do the same with the background image. I believe that you were talking about changing the 0 60px, right? if I change the 0, the background completely disappears (I’ve tried to change it to anything between -10 (minus 10) to 50 with the same result. Changing the 60px boves the background up and down and that’s not what I wanted (in this case anyway). What am I doing wrong? Since the background position is relative, I assume it is relative to SOMETHING, but I don’t know what it’s relative to. If it is relative to the menu (#ja-mainnav) why does it not MOVE (relatively) when I move the menu? By the way, THANK YOU VERY MUCH for your always prompt and accurate replies, I appreciate that. 🙂
Best Regards, Travis

I would appreciate your response to this issue. Thank you in advance!

[Author]

Posts