Shift the menu bar up to the same line with Logo

Demonstrate your product attractively using clean and distinctive coffe shop Joomla template.
normanaudio
Fri Aug 30, 2013 7:55 am
Hi guys,

I want to shift my main menu to the right and it at the same line with the logo. Please help me! Thanks.

My website url is: natest.cloudaccess.net
User avatar
Fresh Boarder

teitbite
Sun Sep 01, 2013 7:13 pm
Hi

Please add this to site's css:

Code: Select all
#gkMainNav {
    left: 300px;
    margin: 0;
    position: absolute;
    top: 73px;
}
User avatar
Moderator

normanaudio
Mon Sep 02, 2013 8:28 am
Hi Teitbite,

Can you help me to remove the following 2 gaps ? Thank you very much for your help.

Image
User avatar
Fresh Boarder

normanaudio
Mon Sep 02, 2013 10:09 am
By the way, can you guide me how to remove "HOME" button ? Thank you.
User avatar
Fresh Boarder

teitbite
Mon Sep 02, 2013 1:45 pm
Hi

Gap removal:

Code: Select all
#gkPageTop h1 {
    height: 60px;
    white-space: normal;
}

#gkMainNav {
    top: 13px;
}


to remove "Home" element use this code:

Code: Select all
div.gk-menu > ul.level0 > li.first {
    display: none;
}
User avatar
Moderator

normanaudio
Fri Sep 06, 2013 4:58 pm
Hi,

Sorry for disturbing you again. I want to ask 2 questions relating to my website.

First, How can i increase the size for my logo ?

Second, How can i remove the gap of the page when i browse it on ipad.

Thank you very much.

Image
User avatar
Fresh Boarder

teitbite
Fri Sep 06, 2013 6:17 pm
Hi

You can make logo bigger with this code:

Code: Select all
h1#gkLogo a img {
    width: 232px;
}
User avatar
Moderator

teitbite
Fri Sep 06, 2013 6:32 pm
Hi

Sorry, I've clicked Submit by accident :)

Replace the code to center menu to this one:

Code: Select all
#gkMainNav {
    left: 50%;
    margin: 0 0 0 -100px;
    position: absolute;
    top: 85px;
    width: 400px !important;
}


This will fix the iPad gap issue.

Greets
User avatar
Moderator

normanaudio
Sun Sep 08, 2013 4:35 pm
Hi teitbite,

Thank you for your help so much. I want to learn building a website.

I just have 1 more issue on my homepage. I want to remove the gap that showing on the image below. Hope that you can help me.



Thank you

Image
User avatar
Fresh Boarder

teitbite
Sun Sep 08, 2013 8:40 pm
Hi

This gap is a what remains from social buttons :) If You do not need it please add this code to css:

Code: Select all
#gkSocialAPI {
display: none;
}
User avatar
Moderator

normanaudio
Tue Sep 10, 2013 5:17 am
Hi teitbite,

Thank you very much for your help. Can you teach me how to put the dotted lines to fit the content of my pages. And how can i delete it if i want. Thank you.

Image
User avatar
Fresh Boarder

teitbite
Tue Sep 10, 2013 1:51 pm
Hi

Css code responsible for this line looks like this:

Code: Select all
#mainPage .box > div, #mainPage .box_menu > div, #mainPage .box_text > div {
    border: 1px dashed #D3CBB9;
}


so to remove this just set a "none" value to this class for border.
User avatar
Moderator

normanaudio
Thu Sep 12, 2013 6:45 am
Hi,

Thank you for your reply. I have tried the code you gave me but i cannot remove the dotted lines. Is there anything wrong ?

Another issue i want to do with the site is that i want to remove the brown square box when i selected a specific section in menubar. Can you teach me how to remove it ? Thank you very much.

Image
User avatar
Fresh Boarder

teitbite
Fri Sep 13, 2013 3:05 am
Hi

I have just show You which code is responsible for adding lines. A code to remove it is:

Code: Select all
#mainPage .box > div, #mainPage .box_menu > div, #mainPage .box_text > div {
    border: medium none !important;
}


Unfortunately I do not understand Your second part of question. What brows box You have in mind ?
User avatar
Moderator

normanaudio
Sat Sep 14, 2013 2:43 am
Hi,

My brown square box is on the menubar which is pointing bellow in the image. Thank you for your help.

Image
User avatar
Fresh Boarder

normanaudio
Sat Sep 14, 2013 2:47 am
Btw, After applying your code, the dotted lines is removed on the top and below parts of my website. But my mainbody still remain the dotted lines. Please let me know if i can do anything. Thank you.
User avatar
Fresh Boarder

teitbite
Sat Sep 14, 2013 2:51 am
Hi

To remove background from under the active menu element please use this code:

Code: Select all
#gkMenu ul.level0 > li.active > a, div#gkDropMain ul > li.active > a {
    background: none repeat scroll 0 0 transparent;
}


border from mainbody part can be removed with this code:

Code: Select all
#gkMainbodyWrap {
    border: medium none;
}
User avatar
Moderator


cron
Remember me
Don't have an account?
GavickPro website uses cookies. By continuing to use this website, you are giving consent to cookies being used. More details…×