Header Customisation - by Daviesd6 - on WordPress WooCommerce support

Solved20 replies2 participantsUpdated by Robert Hall

  • Avatar: Daviesd6
    Daviesd6
    Participant

    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

    Avatar: Robert Hall
    Robert Hall
    Participant

    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
    Avatar: Daviesd6
    Daviesd6
    Participant

    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
    Avatar: Robert Hall
    Robert Hall
    Participant

    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
    Avatar: Daviesd6
    Daviesd6
    Participant

    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
    Avatar: Daviesd6
    Daviesd6
    Participant

    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
    Avatar: Robert Hall
    Robert Hall
    Participant

    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
    Avatar: Daviesd6
    Daviesd6
    Participant

    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
    Avatar: Robert Hall
    Robert Hall
    Participant

    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
    Avatar: Daviesd6
    Daviesd6
    Participant

    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
    Avatar: Robert Hall
    Robert Hall
    Participant

    You’re welcome!

    Regards,
    Robert Hall.

    #110733 Copied
    Avatar: Daviesd6
    Daviesd6
    Participant

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

    Ta,
    Debs

    #110734 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant

    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
    Avatar: Daviesd6
    Daviesd6
    Participant

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

    thanks
    Debs

    #110743 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant

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

    Regards,
    Robert Hall.

    #110753 Copied
    Avatar: Daviesd6
    Daviesd6
    Participant

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

    Debs

    #110755 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant

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

    Regards,
    Robert Hall.

    #110760 Copied
    Avatar: Daviesd6
    Daviesd6
    Participant

    Hello details in PC

    Please, contact administrator
    for this information.
    #110762 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant

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

    Regards,
    Robert Hall.

    #110766 Copied
    Avatar: Daviesd6
    Daviesd6
    Participant

    Perfect…..thanks again

    #110767 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant

    You’re welcome!

    Regards,
    Robert Hall.

    #110768 Copied

The issue related to '‘Header Customisation’' has been successfully resolved, and the topic is now closed for further responses