help moving menu to the right

I need some help aligning the menu to the right.

I have just enough menu items that there is this weird/awkward blank menu on the right. so my solution would be to start the menu from the right (keep the same order though) and remove that space and rather have that space extra on the left and just make the logo bigger if needed.

here is the before:
here is the after:

another thing that i want to adjust is the border. Notice the border line on the left of the menu. would that make the menu end there and not require me to put a non-transparent logo with the light grey bk.

thank you for helping me how to do that.

Hi
Can you give us url to your site?

Hi,

Try using this css code to add to CSS Override mode:

Code: Select all

#gkDropMain{
float: right;
}


Then let me know if it helps.

here is the url http://aleksandrshevchenko.org/index.php

Screen Shot 2012-02-21 at 2.00.18 AM.png

i tried to add that css..

it works - but it still has that extra 1px border there. how can i remove it.

Hi.
You nedd to edit menu.css file and find the following line:

Code: Select all

 #gkMainMenu > div.gk-menu > ul > li > a {
padding: 0 15px;
display: block;
height: 39px;
line-height: 39px;
font-size: 12px;
border-right: 1px solid #E2E2E2;     //just delete this line.
}

it deletes all the borders. i just want to delete that one on the very right.

Screen Shot 2012-02-21 at 5.00.38 AM.png

So, edit menu.css file and to the following line:

Code: Select all

 #gkMainMenu {
position: relative;
z-index: 10000;
margin: 39px 0 12px 0;
border: 1px solid #CFCFCF;
border-bottom: 0px;
}

add this:

Code: Select all

 border-right: none;

seems like that worked.. thanks.

how do i remove that border on the left.. i know there is an image that i can extent over it.. but is there another way of doing it?


h1#gkLogo {
float: left;
margin: -1px 0 -1px -1px;
position: relative;
height: 110px;
width: 198px;
background: transparent url('../images/bg5.png') repeat-x;
margin-left: -1px;
margin-top: -31px;
}

changing to


h1#gkLogo {
float: left;
margin: -1px 0 -1px -1px;
position: relative;
height: 110px;
width: 206px;
background: transparent url('../images/bg5.png') repeat-x;
margin-left: -1px;
margin-top: -31px;
}

but when the page is loading.. there is this border in the back.. and it's like layers that you see.

Can you please use a screenshot to show it to me? Thanks!

k.. man..i actually attached it... i guess it was too big in pixels.. urg..

Screen Shot 2012-02-22 at 1.04.47 PM.png

Screen Shot 2012-02-22 at 1.04.59 PM.png

Hmmm... It's weird because when I click on your site, I don't see this problem. See my screen:

yes.. maybe you have fast internet. but on slower internet - there is a png that is the same color as the background of my page that is loaded over that border so before it gets loaded.. i see that weird border..

by the way - what browser are you using.. the home menu is too much to the right that what it's suppose to be...

I'm using Google Chrome, but in Mozilla Firefox I didn't see border also... So it is hard to "try fix" it when I can't check results.

It's too fast for me to see the issue too, however, try this code:

Code: Select all

#gkMainMenu{
border-style: none!important;
}
#customborder{
background: none!important;
}


It will get rid of the borders around the main navigation.