Joomla Templates Club 406,261 posts

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#151254

Hello. I need to move the main menu to display to the right of the logo. So I need to move it up and right.

Look at the pictures attached. I’ve been looking through all CSS files, and am not sure exactly where to find this. Like I’ve spent so much looking, and moving really moves that menu.

PLEASE help.

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#344511

<em>@harikjr88 179467 wrote:</em><blockquote>Hello. I need to move the main menu to display to the right of the logo. So I need to move it up and right.

Look at the pictures attached. I’ve been looking through all CSS files, and am not sure exactly where to find this. Like I’ve spent so much looking, and moving really moves that menu.

PLEASE help.</blockquote>
Hi harikjr88,
It seems you’ve missed to attach pictures. Please post them or give me your site url so I can help you more.
Regard,

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#344582

Sorry I forgot to attach the pictures, was in a hurry.. But here they are.. I’ll PM you the site URL..

---

Attachments:

1. 
2. 

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#344595

Hi harikjr88,
You can move the menu very easily like the following way:
1, Open file templates/ja_ores/css/colors/light-theme.css
2, Find the CSS code:


#ja-mainnav {
background-image: url(../../images/light-theme/mainnav-bg.png);
border-bottom: 0px solid #0290cc;
}

3, Replace it with


#ja-mainnav {
background-image:url("../../images/light-theme/mainnav-bg.png");
border-bottom:0 solid #0290CC;
position:absolute;
top:50px;
left:300px;
}


As you see, I’ve just add 3 new style values include position, top and left so you can edit top and left value to have a menu position as you want.
Let’s contact me if have any question!
Good luck,
Donglt

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#344721

This works, however caused a few extra unexpected problems..

Look at my site here: http://205.186.137.54/index.php

Problem 1) Scrool to the right.. It has that extra space.. That’s because of the menu changes.. I’m positive., because when I undo it, it works.. I tried changing absolute to relative, still no luck. It gets rid of the extra space on the right, but the search still isn’t clickable and it overlaps the logo making it unclickable also.

Also, try to search.. Doesn’t work.. Because the menu kinda overlaps the search.. Also the logo is clickable.. Again because the menu overlaps it..

I think something is wrong with the positions..

Please help! I can give you my FTP/Joomla info..

See the attached pictures..

THANKS FOR YOUR HELP!

<em>@donglt 179832 wrote:</em><blockquote>Hi harikjr88,
You can move the menu very easily like the following way:
1, Open file templates/ja_ores/css/colors/light-theme.css
2, Find the CSS code:


#ja-mainnav {
background-image: url(../../images/light-theme/mainnav-bg.png);
border-bottom: 0px solid #0290cc;
}

3, Replace it with


#ja-mainnav {
background-image:url("../../images/light-theme/mainnav-bg.png");
border-bottom:0 solid #0290CC;
position:absolute;
top:50px;
left:300px;
}


As you see, I’ve just add 3 new style values include position, top and left so you can edit top and left value to have a menu position as you want.
Let’s contact me if have any question!
Good luck,
Donglt</blockquote>

---

Attachments:

1. 

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#344724

Hi harikjr88,
Please edit the code as following to get the issue fixed

#ja-mainnav {
background-image:url("../../images/light-theme/mainnav-bg.png");
border-bottom:0 solid #0290CC;
position:absolute;
top:50px;
left:500px;
width:300px;
overflow:hidden;
}

Good luck!

1 user says Thank You to Don Lee for this useful post

1. harikjr88

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#344728

Thanks so much! You’re so awesome..

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#344848

Everything was cool, except when I got onto my MacBook Pro to look at the site.

Look at the attached picture.

The menu is still messed up. It’s always like that. On the 13 inch MacBook Pro.

Any changes I can make to fix that?

Plz help. Thanks! You can see the live site here: http://205.186.137.54/

<em>@donglt 179979 wrote:</em><blockquote>Hi harikjr88,
Please edit the code as following to get the issue fixed

#ja-mainnav {
background-image:url("../../images/light-theme/mainnav-bg.png");
border-bottom:0 solid #0290CC;
position:absolute;
top:50px;
left:500px;
width:300px;
overflow:hidden;
}

Good luck!</blockquote>

---

Attachments:

1. 

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#344849

Not only on the MacBook, but on my 15 inch HP notebook also.. 🙁 🙁

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#344853

Hi harikjr88,
The cause of issue is a high value of left style set. As the last reply, I recommend you to set it by 500px but I see you set it by 700px so it’s overlapped the search when use a low resolution screen. If you want to locate the menu at the left of search box, let’s remove the left style and replace by a right style as the following:

#ja-mainnav {
background-image:url("../../images/light-theme/mainnav-bg.png");
border-bottom:0 solid #0290CC;
position:absolute;
top:50px;
right:300px;
width:300px;
overflow:hidden;
}

Enjoy!

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#344875

If I would have kept the 500px, the menu wouldn’t display in the right place. It’d be somewhere else.

Also I have just changed it to right, then if I use 300px like you said for right, it displays in the wrong place also. So I have to change it. Once I change it, it looks good on one computer. HOWEVER, if I go on the MacBook, again it’s in the wrong place again.

So changing it to right instead of left doesn’t quite work. Same problem..

Here’s the results if I change it to right (look at the attached picture).
That’s the screenshot from my MacBook Pro.

---

Attachments:

1. 

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#344879

Hi,
Can you give me your ftp account via PM? I’ll try to modify some codes in core.
Thanks

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#345021

Hi,

Thank you for waiting. I’ve just modified some files in your hosting and now your site has a good look as you want, I’ve also tested with some low resolution screens and it’s ok.

Regards

1 user says Thank You to Don Lee for this useful post

1. harikjr88

[harikjr88 Friend harikjr88Join date: August 2009Posts: 30Downloads:0Uploads:9 Thanks: 5]

#345031

Thanks! Works on both resolutions.. I modified a bit more to customize it how I want.. 🙂

THANKS AGAIN!!!

[pbeckermann Friend pbeckermannJoin date: May 2008Posts: 15Downloads:0Uploads:0]

#363805

<em>@donglt 180354 wrote:</em><blockquote>Hi,

Thank you for waiting. I’ve just modified some files in your hosting and now your site has a good look as you want, I’ve also tested with some low resolution screens and it’s ok.

Regards</blockquote>

can you explain how you fixed this as we have the same issue

Phil

[Author]

Posts