Return to previous page

Header Customisation - by Daviesd6 - on WordPress WooCommerce support

This topic has 21 replies, 2 voices, and was last updated 9 years, 10 months ago ago by Robert Hall

Daviesd6

Participant

January 27, 2016 at 14:24

Hello

Do you have any documentation for customizing the header – i.e. background colour, logo position/placement and header size..?

I need to do this

Thanks,
Debs

#110302 Copied

20 Answers
Robert Hall

Participant

January 27, 2016 at 15:08
Hello,

To change background color of the header you need to add this code in custom.css file.

.header-wrapper{ background: red; }

Could you please clarify with more details which styles of header size and logo position you want and show us screenshots?

Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#110309 Copied
Daviesd6

Participant

January 27, 2016 at 17:13

Robert hello the code above would change the header to red, the background colour – is it possible to use an image here. Tried the code and nothing has changed though

Debs

#110332 Copied
Robert Hall

Participant

January 27, 2016 at 17:27
Yes, to add an image there use the following code.

.header-wrapper{ width: 100%; height: 100%; background-image: url("http://legenda/wp-content/uploads/revslider/home/s3.jpg"); background-size: cover; background-position: 0% 0%; background-repeat: no-repeat; }

Regards,
Robert Hall.
#110335 Copied
Daviesd6

Participant

January 28, 2016 at 18:37

Thanks just one more thing the menu/navigation I need to change the colours – text and can these be made solid blocks or change to a solid block when selected / hovered over..?

Thanks
Debs

#110614 Copied

Daviesd6

Participant

January 28, 2016 at 20:57

Hello have implemented a background image on the header – one issue when I change the logo the background image is out of proportion. Put in the older slightly smaller one then everything is ok again. Is there a fix for this.?

Debs

#110650 Copied
Robert Hall

Participant

January 29, 2016 at 08:32
Hello,

Please add this code in custom.css file.

.fixed-header .menu > li > a, .main-nav .menu > li > a{ border: 1px solid transparent; } .fixed-header .menu > li > a:hover, .main-nav .menu > li > a:hover{ border: 1px solid #000; color:red; }

I’ve checked your site and didn’t see there a background image.
Maybe provide screenshot for our better understanding and highlight what exactly you want.

Regards,
Robert Hall.
#110677 Copied
Daviesd6

Participant

January 29, 2016 at 09:44

Robert

Hello its a site rebulid http://www.justlovestyle.com for Prime Hide. You can see the logo has been added and the image has expanded too much. The menu options need to be a sold block and in another colour.

Debs

#110699 Copied
Robert Hall

Participant

January 29, 2016 at 11:16
If you want to display it like here http://prntscr.com/9wb5r2 use the following code in custom.css file. Otherwise provide us with screenshot how it should be.
Menu background:

.main-nav .double-border { background: grey; }

Background image under logo:

.header{ width: 100%; height: 100%; background-image: url("http://justlovestyle.com/wp-content/uploads/2016/01/header-1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 30px 0px; margin: 0; }

Regards,
Robert Hall.
#110722 Copied
Daviesd6

Participant

January 29, 2016 at 11:49

Robert thanks that will be fine – just need to be able to relocate the logo as the new one is clashing with the start of the primehide wording on the background then I think its there..!

Many thanks
Debs

#110730 Copied

Robert Hall

Participant

January 29, 2016 at 12:00

You’re welcome!

Regards,
Robert Hall.

#110733 Copied

Daviesd6

Participant

January 29, 2016 at 12:04

Hello did you see the question about logo relocation please..? Can you help.?

Ta,
Debs

#110734 Copied
Robert Hall

Participant

January 29, 2016 at 12:11
Hello,

Please try to use this code in custom.css

.header7 .logo { text-align: left; } .header-wrapper .search{ width: 284px; }

Regards,
Robert Hall.
#110736 Copied
Daviesd6

Participant

January 29, 2016 at 12:39

Robert its way left now is there a way we can code an absolute value to pin point its location?

thanks
Debs

#110743 Copied

Robert Hall

Participant

January 29, 2016 at 13:11

Please show screenshot for our better understanding how it should be.

Regards,
Robert Hall.

#110753 Copied

Daviesd6

Participant

January 29, 2016 at 13:25

Hello it needs to be centre i.e. in between the both primehide “writings” on the background

Debs

#110755 Copied

Robert Hall

Participant

January 29, 2016 at 14:03

Please provide us with wp-admin access for http://www.justlovestyle.com in Private Content.

Regards,
Robert Hall.

#110760 Copied

Daviesd6

Participant

January 29, 2016 at 14:21

Hello details in PC

Please, contact administrator
for this information.

#110762 Copied

Robert Hall

Participant

January 29, 2016 at 14:39

I’ve made changes in custom.css file. Please check it now.

Regards,
Robert Hall.

#110766 Copied

Daviesd6

Participant

January 29, 2016 at 14:45

Perfect…..thanks again

#110767 Copied

Robert Hall

Participant

January 29, 2016 at 14:51

You’re welcome!

Regards,
Robert Hall.

#110768 Copied
Viewing 21 results - 1 through 21 (of 21 total)