Joomla Templates Club 406,261 posts

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

#171818

I’m modifying Bistro signifcantly because I like the overall layout of it and plan to use some of the modules that come with it. But I’m running into some problems:

1) I want to move the Top Menu to within the header block. That much was easy. But now I want to make it a horizontal menu, not a vertical layout, and I want to place it in the lower-right corner. In other words, I’d like to float the logo left, and the Top Menu right, with enough padding to put it in the bottom-right corner, as shown in the attached graphic. I’ll also need to edit the styling on the font (color, size, etc). Please tell me what code and CSS I need to alter to create this look.

2) I want to fix whatever is causing the ja-mainnav div to not align center with the rest of the site. I’m having to force it to align center by giving it margins of 30px on the right and -30px on the left. Then it aligns center with the rest of the divs below it, but only until you squish the browser window to the width of the site, which is set at 950px. At that point, this 30px margin becomes evident, as the ja-mainnav div slides over to accomodate the margin, and the rest of the site doesn’t. You’ll see the 30px margins I’m talking about on line 604 of the template.css.

Please assist me in resolving these two issues. If I can get them sorted, I’ll be well on my way to getting this template looking how I want it.

Thank you!

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#429721

Hi

1. To place the topmenu in header at right bottom corner of the header, please add the following styling in the template.css file
<blockquote>#ja-top {
float: right;
width: 60%;
}

#ja-top ul{
text-align: center;
position: absolute;
right: 0px;
top: 70px;
}

#ja-top ul li {
float: left;
width: 90px;
}</blockquote>

2. Check if in the template.css there is a styling as below
<blockquote>.main {
width: 950px !important;
max-width: 1200px;
margin: 0 auto;
position: relative;
padding-left: 60px;
}</blockquote>
The 60px padding on left side is causing your main menu to move from the correct place.

1 user says Thank You to himangi for this useful post

1. synapsis

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

#429806

<em>@himangi 289259 wrote:</em><blockquote>The 60px padding on left side is causing your main menu to move from the correct place.</blockquote>

Thank you for your prompt response, Himangi. I will give your suggestion regarding the top menu a try.

However, I would ask you to please take a look at MY template.css, because I’ve modified it, and I don’t think that 60px padding is there any longer — but would gladly be proven wrong! While the rest of the site is nicely centered (margin: 0px auto 0px auto;), the main nav div refuses to center using the same margin settings. If you have access to the domain and user info I sent in with this question, I’d appreciate you looking at my CSS directly to help me with this. Thank you for your assistance. It is greatly appreciated.

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

#429812

Your top menu solution worked like a charm. Thank you very much. I have added to your growing collection of Thank You’s.

I am still unable to resolve my main nav alignment issue. Please have another look at it? My template.css has been significantly modified from the Bistro original, however, so it might take some hunting. Any other moderators with access to the domain info I gave in my original post should feel welcome to look also. I really need to resolve this issue quickly. I need to make multiple template themes from this first default one, and I can’t proceed until this first one is perfect. Many thanks in advance for your excellent help.

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

#429895

Bump. Still need a solution to problem #2. Thanks in advance!

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#429935

Hi,

I have added the following in the template.css and it shows the menu exact as in the demo.. <blockquote>#ja-mainnav .main {
padding-left: 0px;
}</blockquote>

Only difference is that there is no extra styling displayed beyond the 950px width, on the right side, similar to the extra side of the slideshow like it is there in demo. Please check attache screenshot for demo showing the same..

---

Attachments:

1. 

1 user says Thank You to himangi for this useful post

1. synapsis

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

#430020

I’ve got the following in my template.css, but it’s still not viewing correctly.


/* Main Nav ---*/
#ja-mainnav .main-inner1 {
background: url(../images/mainnav-bg.png) repeat-y center top;
margin: 0px auto 0px auto; /* <-- I WANT to use this, so that the mainnav div lines up with the rest of the centered blocks, which have the same margins. But for some inexplicable reason, it is set to the right of everything else by about 60px, but I can't find a reason for that anywhere else in the template.css --> */
/* margin: 0px 30px 0px -30px; <-- SO, I have to add this to get it to line up. BUT, if I narrow the browser window to the 950px width, OR view the site in IE, then this margin hits the left edge of the browser and pushes the Main Nav out of alignment again. --> */
padding-left: 0px; /* <-- This didn't seem to do anything to fix the problem. Any other ideas? --> */
width: 950px;
}


Please read my comments above, and give me your thoughts. There’s some outside influence at work on the mainnav div, but for the life of me I can’t find it, and I’m hoping fresh eyes will help. Please look at the whole template.css (and maybe even the style.css for the main menu), and see if you can help me find it? I’m getting REALLY frustrated, and falling behind on my development schedule because of this.

Any further help is GREATLY appreciated.

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#430053

Hi,

As i said earlier the menu was center aligned with ref to the site width when I added the styling I mentioned before.. I just checked your template.css and the styling I added was not there, also the bit of code I had removed from the existing styling is appearing there again, so I assume you have made changes …

I found the following styling in the css and I have again made changes as mentioned below.
<blockquote>/* Main Nav —*/
#ja-mainnav .main-inner1 {
background: url(../images/mainnav-bg.png) repeat-y left top;
margin: 0px auto 0px -30px;
}</blockquote>

Changed and newly added code is as highlighted.
<blockquote>/* Main Nav —*/
#ja-mainnav .main-inner1 {
background: url(../images/mainnav-bg.png) repeat-y left top;
/* margin: 0px auto 0px -30px;*/margin:0px;
}

#ja-mainnav .main {
padding-left:0px;
}</blockquote>

After I made these changes the site is looking fine.. Even with the reduced browser window size, menu remains at the same position, as expected.

Please see the screenshot attached for how the site is looking at my end.. Explain again what is wrong in the screenshot or send me screenshot of what you are seeing and explain the issue wrt that.

---

Attachments:

1. 
2. 

1 user says Thank You to himangi for this useful post

1. synapsis

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

#430098

Crazy. When I tried exactly that, it didn’t work, so I kept tinkering. Somehow you did get it to work just fine. Not sure what we did differently, but I appreciate it greatly. Many thanks!

[Author]

Posts