Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#173026

I’m trying to move a narrower version of the main navigation bar (#ja-mainnav) into the header. Using a combination of CSS and the Template Manager (Layouts –> Edit Default), I was able to get it positioned where I want it.

However, what I cannot figure out is:

1) What CSS file & lines do I need to edit to make each item “tab” on the main menu have less padding? I want them to take up less horizontal space, so I can get five buttons to fit within the alloted space without having to make the logo smaller (if possible).

2) What CSS or Template Manager item do I need to edit to reduce the width of the #ja-mainnav to just the width of the menu items shown, because right now, I’m getting a horizontal scroll-bar that scrolls as far as the mainnav block would go (~1000px?), since it’s really just been moved up and over using CSS positioning.

I hope I’m making myself clear. I’ve included an example of what I’ve got so far… with red lines indicating where the page edges SHOULD be, so you can see how much more I need to narrow the main menu to get my five buttons to fit (question #1) and why the side-scrolling appears at the bottom of the browser window (question #2).

Here’s the template.css for the #ja-mainnav as it is now:

#ja-mainnav {
font-size: 100%;
z-index: 13;
position: absolute;
left: 450px;
top: 63px;
}

And here’s the change I made to the Template Manager Default Layout:

<block name=”header” type=”header” main-inner=”1″></block>
<block name=”mainnav” type=”mainnav” main-inner=”1″></block>
<block name=”cpanel” type=”usertools/cpanel”></block>

As you can see, I’ve moved the menu down from the top of the page to below the header, and then used CSS positioning to move it up and over. What I can’t figure out is how to make it fit using a set width, because if I set the width, the positioning no longer works (though I have no idea why not).

Thanks for any assistance you can provide. My timetable on this site is short.

I’m willing to provide access to the site if needed, but I’d prefer an explanation instead (which I know is challenging, but I think I’ve provided everything you’d look at if you were logged in.

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#434729

Might you be able to provide the url of the site you’re working on – as well as set “Optimize CSS” to “No” within your Template Manager–General Settings ??

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#434799

PM sent to you with the information you’ve requested.

Thanks Tom. Hope you’re having a great weekend.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#434904

<em>@synapsis 295887 wrote:</em><blockquote>

However, what I cannot figure out is:

1) What CSS file & lines do I need to edit to make each item “tab” on the main menu have less padding? I want them to take up less horizontal space, so I can get five buttons to fit within the alloted space without having to make the logo smaller (if possible).

2) What CSS or Template Manager item do I need to edit to reduce the width of the #ja-mainnav to just the width of the menu items shown, because right now, I’m getting a horizontal scroll-bar that scrolls as far as the mainnav block would go (~1000px?), since it’s really just been moved up and over using CSS positioning.
</blockquote>

I believe the CSS you need to work with (which should deal with both of the above issues) is — templates/ja_erio/css/menu/mega.css

starting at line 13

.ja-megamenu ul.level0 li.mega a.mega {
background-image: url("../../images/grey_border_l.gif");
background-position: 100% 0;
background-repeat: no-repeat;
color: #FFFFFF;
line-height: 5;
margin-bottom: 5px;
padding: 0 20px;
text-transform: uppercase;

}

Change the “20px” value within the padding parameter to something lower – perhaps “10px?”
(experiment with it until you get the result you want)

Let me know if the above suggestions achieve what you were looking for.

1 user says Thank You to TomC for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#434921

Thanks for getting back to me so quickly. I’m sure that will help quite a bit, but the sheer amount of side-scrolling that I can do on the page makes me think that I’ve taken a 1000px div and moved it over 450px, and that’s going to require something more than adjusting the ~100px max that I can with padding. But it’s a start!

It’s probably going to take something more, but I’ll give that a shot in the office tomorrow. I’ll let you know. Thanks again. Weekend service! Amazing. Thanks!

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#435099

Well doesn’t that just figure… I put in all this effort to move the main menu around, and the client contacts me today with a whole new menu layout.

Guess the good news is that means my problem above is no longer an issue. Would have been nice to figure out though. The padding suggestion you made gave me the fit I wanted for five of the main menu items, but the side-scrolling was still just as bad. I’m pretty sure that somewhere, the width of the div is still “there,” causing the sidescrolling when I moved that div over by 450 pixels to the right. Still no idea where to solve that problem, but as I said, it’s no longer an issue I guess.

Thanks again for your help Tom.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#435238

<em>@synapsis 296389 wrote:</em><blockquote>
Thanks again for your help Tom.</blockquote>
Of Course . . . Anytime

All the best with your continuing site development (sounds like you have your hands full with this one) 😎

[Author]

Posts