[Support request] Same bacground on nav and header

Home Forums Support [Support request] Same bacground on nav and header

Home Forums Support Same bacground on nav and header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1579640
    david

    Hi,
    I’m making a new site here https://irishsteveseaves.ca/

    I want to have a background image that only covers the header area (where the logo is) and the main navigation menu.

    I want to use the green background i have on the nav right now.

    I want just 1 image as I don’t want people to see the join.. As i could just put this image in twice, once on the nav as I have and once on the header area which is white now.

    But I’d like it to look better and just have 1 image that covers both areas.. is this possible?

    #1579710
    Elvin
    Staff
    Customer Support

    Hi,

    But I’d like it to look better and just have 1 image that covers both areas.. is this possible?

    This is possible but we’ll have to change the Header Presets back to default so both the nav bar and the logo are wrapped within <header id="masthead">.

    Once they’re wrapped within the header tag, you can try playing around with the CSS to achieve the same layout:

    Example:

    .site-logo{
    width: 100%;
    display:block;
    text-align: center;
    margin: 5px 0px 15px 0;
    }
    
    header#masthead .inside-header{
    flex-wrap: wrap;
    }
    
    header#masthead{
    background-color: red; /* replace this with the green background-image */
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1579723
    david

    Thanks for the reply.

    Is changing back to default easy to do?

    #1580139
    David
    Staff
    Customer Support

    Hi there,

    go to Customizer > Layout > Primary Navigation and set the Location to Float Right.
    Then remove the background image from the Navigation and add it to the Header.

    Once thats done, let me know and we’ll provide some CSS to place the nav below the logo.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.