Background color

Hello

Where can i change the background color, font color and hover color for the red marked areas in the image attached (header and menu)

Thank you!

Hi, Here & use This:

Code: Select all

#gkHeader > div:first-child { background: black;}
#gkHeaderTop, #gkHeaderTop a, #gkTopMenu a {color:white;}

Hello thank you for the help, in what sheet should I put this code?

More info here: https://www.gavick.com/documentation/jo ... a-template

Thank you that worked perfect, but how do i change too the backgound color and font color (color and hover) of the for the line where the logo is?

Thank you

Code: Select all

#gkHeaderNav {background: red;}
.gkMenu > ul > li > a {color: green;}
.gkMenu > ul > li > a:hover {color: yellow;}
.gkMenu > ul > li.active > a {color: blue;}

Thank you that worked perfectly!

I have 2 last questions

How do i change the font type, font weight and font size of the main menu?
How can i make the logo bigger than the header nav background? I want to keep the bakcgound in 63px as default but i want the logo to be 80px, if i upload a 80px logo the header nav background goes automatically the heigh of the logo, how can i prevent this?

Thank you!

MENU: https://www.gavick.com/documentation/jo ... f-the-menu

How can i make the logo bigger than the header nav background?

It won't be so easy, but ok try:

Code: Select all

#gkHeaderNav h1 {position: absolute;}

for img logo

Hello,

Thank you for the response, i had tried adding that code and it breaks the code i had before in override.css this is what i have in override.css file

Code: Select all

/*
#------------------------------------------------------------------------
# StoreFront - April Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2014 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */

.pin-it-button {display:none !important;}
#gkHeader > div:first-child {background: url('../images/arriba_barco.png') #FFFFFF no-repeat center 8px!important;}
#gkHeaderTop, #gkHeaderTop a, #gkTopMenu a {color: #000000;}
#gkHeaderNav {background: #000000;}
.gkMenu > ul > li > a {color: #FFFFFF;}
.gkMenu > ul > li > a:hover {color: #009CE1;}
.gkMenu > ul > li.active > a {color: #009CE1;}

if i add that code you gave me it breaks the #000000 background i have for HeaderNav

What can this be?

Thank you!

Hard to say,
I added your whole code with new mine:

Code: Select all

#gkHeaderNav h1 a {position: absolute;}

and all works okey and looks like that (of course I don't have your BG img)

hahahah nice logo!

thats strange now i added the code again and it worked fine!

Thank you for the support and patience now i have it all running 100%!

No problem.
I didn't use transparency, but you should and final effect will be even better.