Full Width Menu Background

Support Area Forums Finesse Full Width Menu Background

This topic contains 6 replies, has 2 voices, and was last updated by  Bill Robbins 3 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
URL to the page in question: http://greatestates.wpengine.com/?page_id=84
  • Author
    Posts
  • #37112

    Gia Watkins
    Participant

    I wanted to add a full width color band at the top of the page for the menu. This way the menu items will be visible no matter what the colors of the photo image behind it. All I could figure out was to add a background to the menu links via CSS. Is there a fix for this?

    #37115

    Bill Robbins
    Moderator

    Hi Gia,

    You can customize the theme that way. Add this to the Custom CSS that’s in the advanced section of the customizer:

    
    #header-content {
    	height: auto;
    }
    
    #header,
    .hero #header {
    	background-color: #fff;
    	position: relative;
    }
    

    That would change the header to have a white background. It would also move the hero area down below the header so it won’t be covering up part to the image.

    You might consider taking the Bonnie’s Greatest Estate Sales logo out of the hero images and instead insert it into the hero title as a logo. That would keep the logo from getting cropped potentially depending on screen size. Just a thought.

    Let me know if you have any questions,
    Bill

    #37125

    Gia Watkins
    Participant

    Thank you, Bill. I know have a full width menu bar which is what we wanted! However, the bar is not flush top with the page, there is a band of grey. Can we remove that? And, make the depth of the menu bar narrower?

    Thanks!
    Gia

    #37129

    Bill Robbins
    Moderator

    The bar may be from being logged in with the admin bar present. Try adding this to your custom CSS:

    
    .hero.admin-bar #header {
    	top: 0;
    }
    

    You can make the header a bit smaller too. Add this to the Custom CSS as well:

    
    nav#primary-site-navigation {
    	margin-top: 0;
    }
    
    

    If you need to make it smaller than that, you can reduce the top and bottom padding of the menu items with this:

    
    .sf-menu a {
    	padding-top: .75em;
    	padding-bottom: .75em;
    }
    

    The default is .75em so feel free to change that if you need to.

    Also I did notice a change or two inside the style.css file. It’s perfectly fine to make changes there, just be aware that the theme won’t be able to be updated if changes are made inside it. They would be overwritten by the update. If you have a small number of css changes you can use the Custom CSS box. Just copy the style there from the style.css file and edit it there. If you have lots of changes then I would go with a child theme.

    Hope that helps out. Have a great week,
    Bill

    #37130

    Gia Watkins
    Participant

    Yes that helps! At your suggestion I am now trying to put the logo into the header through the customizer. The logo is getting very small. Is there a way to make the logo area wider so that it doesn’t get so small?

    Thank you for the help!

    gia

    #37135

    Gia Watkins
    Participant

    Never mind…figured it out myself, I think… Thanks! Gia

    #37140

    Bill Robbins
    Moderator

    Glad you’re sorted out. If you have questions, let me know.

    Bill

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Full Width Menu Background’ is closed to new replies.