Joomla Templates Club 406,261 posts

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#158345

Hello,

I was wondering how Can I move the Main Menu to the far left, I know it is already on the left side but I need to move it more to the left ( far left not the normal left) – Template Ja Beryl

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370305

On what template (you have posted in a generic forum)? Can we also have a link to yor site please. If it is a T£ version 2 based template then also turn off css compression as it aids us in working out a solution.

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370313

its a Ja beryl template, I dont know how to turn off the compr.. since I am new to the whole Joomla CMS, I will pm you my testing site link.

Thanks

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370314

Do you want ride of the logo then?

If that is the case then please also PM me an admin logon and I will make the changes.

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370315

Not really, I would like to move the menu only to the far left .. you think that is possible? the reason is I need more space so by moving the menu to the far left it would give me much more space to add more things

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370318

It is possible but not advisable. If we take it out of the div and float it left the position would change depending on the width of the users screen. I’ve not used Beryl, is there a wide screen option? That would giv you more room. Or you could move the logo to a full width one above the menu and keep the menu in the same div so it would only go as far left as the main content below (ie, into the space where the logo is). Other option would be to adjust the size of the font used for the menu, that would reduce the space each item takes.

I would just carefully think about my menu design, things like contact us etc can safely be left at the bottom. Think about dividing you dropdown menus well and I am sure you can come up with a good structure.

1 user says Thank You to Phill for this useful post

1. yazidz

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370347

I will try it, thanks Phil

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370644

You could always set the template to wide if you cannot find other ways of accomplishing your needs.

If you post a link to your site I will try a few different options and post screenshots for you.

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370655

hey Phil,

I will send you the link in PM

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370665

Cannot test fully as you appear to have no menu items at the top at present but open template.css and around line 823 find the following code


h1.logo, div.logo-text {
float:left;
margin:2px 0 0;
padding:0;
width:20%;

}


and change to


h1.logo, div.logo-text {
float:left;
margin:2px 0 0;
padding:0;
width:20%;
position: relative;
left: -50px;

}


You can adjust the -50 to incerase or decrease how far left you want your logo

1 user says Thank You to Phill for this useful post

1. thekadster

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370675

it did move the logo but the menu is still at the same position tho

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370677

Please publish the menu so I can actually see it.

[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370680

<em>@phill luckhurst 213496 wrote:</em><blockquote>Please publish the menu so I can actually see it.</blockquote>

I just did, tho the top menu will be disabled since I dn’t need it, the one I want to move is the Mainmenu at the left.

Thanks

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#370682

Open template.css around line 878 adjust the figure in red as seen below.


#ja-mainnav {
float:right;
margin:0;
padding:0;
position:relative;
width:79.9%;
z-index:9999;

}


[yazidz Friend yazidzJoin date: April 2010Posts: 30Downloads:0Uploads:1 Thanks: 5]

#370684

I tried to play with it, it moves the header up and down ( the top black) it doesn’t adjust the menu on the left.. maybe I miss explained it.. but the menu that I am trying to target is the menu on the left not the top, the one that has blue background.

Thanks

[Author]

Posts