Logo position change

Hi Everyone,

I made something in photoshop how i want to position my logo in this template.
I was wondering if its possible, what i need to adjust for it and also with the multi language option.

hope somone can help me with it

kind regards

Hi

I'm not sure if i understand. Can you please explain about this Sofia and show it to me maybe ?

Hi teitbite,

I would like to position the logo in the white top nav, also enlarge and center it.
The Menu i also want to center same as the logo.
Thats what i tryd to make with photoshop because i want to use a logo that doesn work on a black background so i was looking for a solution and the only thing was placing it in the top nav or header dont know what to call it sorry.
And about the multi language , i think i need to make that for myself and position the multi language on topnav.

kind regards

Hi

I'm not sure if i understand. Can you please explain about this Sofia and show it to me maybe ?

Hi

Please put Your new logo and show me Your site. I'll tell You the code to make it look good with new logo.

Hi,

I just send you the URL, account and password info.
I also changed the logo.

kind regards

Hi

Please add this to override.css and make sure override is enabled in template settings:

Code: Select all

#gkHeaderNav {
    z-index: 10002;
}

#gkHeaderTop {
    height: 71px;
}

#gkHeaderNav {
    top: 71px;
}

#gkLogo img {
    margin: -71px 0 0;
}


Hi,

I got it in the header thank you very much!
and how can i center the logo and also the menu just like my image i posted in the first post ??

Also when i scroll down i see the whole site tru my header, could you help to fix that ??

kind regards

Hi

This will cover header and site will not be visible:

Code: Select all

#gkHeaderTop {
    height: 150px;
}


This will center logo:

Code: Select all

#gkLogo {
    left: 50%;
    margin: 0 24px 0 -150.5px;
    position: relative;
}


This will center menu:

Code: Select all

#gkMainMenu {
    float: none;
}


Hi teitbite,

Thank you very much for the superb help.

Could help me with one more problem?

because i dropt the menu bar a little bit i have problems with with all my articles.
The menu bar is infront of a few things ( see attachment )

here you see my menu bar is infront of my k2 articles pictures.
could i change my margins for the whole site somehow ??

kind regards

Hi

Of course, but can You please remind me the url to Your site ? I cannot find Your message. I must have deleted it, sorry.

Hi,

Thats really no problem, i just send you a PM with all the info, thnx for your help!!


kind regards

Hi

Of course, but can You please remind me the url to Your site ? I cannot find Your message. I must have deleted it, sorry.

Hi

Try add this to override.css (override needs to be enabled in order for this to work):

Code: Select all

#gkHeader {
    padding: 212px 0 0;
}


It workt superb !! thank you very much!!!

Hi

Try add this to override.css (override needs to be enabled in order for this to work):

Code: Select all

#gkHeader {
    padding: 212px 0 0;
}


Hi

No problem, but please check if this works in mobile devices as well. If not than You need to add the same code but with different values of padding in template.css and mobile.css.

Hi , thank you very much for the tip, it works perfect !
Only the logo is not in the center , how can i center it ??

Kind regards

Hi

I can see that logo is centered. Can You please explain what You have in mind ?

Hi ,

Sorry i was talking about the mobile version , there is the logo not centered....

Kind regards

Hi

Please add this at the end of mobile.css file:

Code: Select all

#gkLogo {
    margin: 0 24px 0 -150.5px;
}


thank you very much for you reply,

But for some strange reason it doesn't work...

Hi

It has to, try maybe with !important rule:

Code: Select all

#gkLogo {
    margin: 0 24px 0 -150.5px !Important;
}


Hello, after this tutorial I have a few issues.

1) The logo is in the center but still on the menu position (photo 1)
2) I changed the logo.png in /template/images but still the old one is shown (photo 1)
3) The cart dropdown is behind the menu (photo 2)
4) Why is the button "add to chart" bleu in Firefox (photo 3) and red in chrome (photo 2)

See images

Code in override.css

Code: Select all

/* Here you can include your override CSS styles */
#gkLogo {
    left: 50%;
margin: 0 24px 0 -150.5px;   
    position: relative;
}
#gkHeaderNav {
        z-index: 10002;
    }
#gkHeaderNav {
        top: 71px;
    }
#gkHeaderTop {
    height: 150px;
}

#gkMainMenu {
    float: none;
}


Hi

Please tell me an url to Your site. I'll check what is missing.

Rigth now I only can answer to 4). :

4). Both this browsers must have a different color styles selected. Selection is stored in cookie, so this can be different per browser.

Hi,
Thanks for your reply

2) was because of the logo text option in the template settings. That's fixed but the logo is still 'behind the menu'.

The site runs on Xampp for this moment, so not easy to share

Perhaps i do something wrong met the code for the override.css. Code in this post is fragmented. Perhaps you can help me giving me the right code to place in overide.css. If that doesn't work I put the site somewere live. Thanks in advance.

Hi

I will give You the code, but will have to see the site first to know what code is needed. Please ignore this for now and let me know when it will be public.

Hi

@giuseppek here is a piece of code to fix the popup image on Your site after our modification. Please add it to override.css file and make sure override is enabled in template settings.

Code: Select all

#gkHeader {
    position: relative;
    z-index: 8000;
}


You are amazing!!

it worked superb!!!
I accidentally reported your last post.. so sorry !! wasnt my intention..

Hi

@giuseppek here is a piece of code to fix the popup image on Your site after our modification. Please add it to override.css file and make sure override is enabled in template settings.

Code: Select all

#gkHeader {
    position: relative;
    z-index: 8000;
}


Hi

I got Your PM about multilanguage content of Your site. There are 3 ways:

1. Default joomla system described here: https://www.gavick.com/documentation/un ... oomla-1-7/

2. A similar to the above but with using a copy of template style with different menu attached per language

3. By using Falang component. I think it's easiest way, since first 2 can be confusing.

Hi !

That was fast , thank you very much i just PMed you 10 min ago haha

kind regards

Hi

I got Your PM about multilanguage content of Your site. There are 3 ways:

1. Default joomla system described here: https://www.gavick.com/documentation/un ... oomla-1-7/

2. A similar to the above but with using a copy of template style with different menu attached per language

3. By using Falang component. I think it's easiest way, since first 2 can be confusing.

Hi

I got Your another message. Why I we talking via PM ? It's very confusing for discussion.

Thank you very much !!

everything is working correctly.

Is it also possible if you could help me get the Multi Language working on it ??(dutch and english)
i was trying but i dont seem to work...
I want to put in where the burt button is now...

Add this at the end of mobile.css:

Code: Select all

#gkTopMenu {
    display: block;
}

#gkLogo {
    margin: 0 24px 0 -150.5px !important;
}


My apologies didnt know if i could bump these old thread with new questions.

but it worked thank you very much!

kind regards

Hi

I got Your another message. Why I we talking via PM ? It's very confusing for discussion.

Thank you very much !!

everything is working correctly.

Is it also possible if you could help me get the Multi Language working on it ??(dutch and english)
i was trying but i dont seem to work...
I want to put in where the burt button is now...

Add this at the end of mobile.css:

Code: Select all

#gkTopMenu {
    display: block;
}

#gkLogo {
    margin: 0 24px 0 -150.5px !important;
}


Hi teitbite,

My apologize, I have another question...i would like to have more room for scrolling on the mobile version.
When i have my phone horizontal i have like 1cm for scrollen because the menu bar and logo are fixed and above everything.
Do you know what kind of css i need to use or to adjust ?

kind regards

Hi

Try add this to mobile.css:

Code: Select all

#gkHeader {
    padding: 0;
}

#gkHeaderTop {
    position: relative;
}

#gkHeaderNav {
    position: relative;
    top: 0;
}


PERFECT MANY THNX!!