Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1093811

    I’m trying to complete the header to my site and am struggling to get a background image to appear both in the logo area AND the top bar (what you call “Small bar above Main Menu” in advanced styling). You can see the CSS I’ve written to try.

    I would also like to know why the button in the top bar is not a colored button (as I’ve set it under Menus)?

    Thank you for any insight!

    #1094828

    what is the expected response time?

    #1094994

    Hi,
    Sorry for the late reply, to add a red background color to your top button, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #menu-item-53 {
        background: red !important; 
    }

    Best regards,
    Mike

    #1095314

    Thanks Mike, I was able to sort-out the button issue that way, but was more curious why it didn’t work by setting the colored button in the menu to begin with? Also, this answered only the second half of my question – how to get a background image to appear both in the logo area AND the top bar.

    #1096158

    Hi,

    Thank you for contacting us.

    The styling options to display the menu items as button elements works for the main menu items only.

    You can set the Header Background Image from:
    Enfold > General Styling > Logo Area > Background Image

    If you need to add custom styled background images please try adding the below CSS code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    NOTE: Please update the image path in the below code to suit your background image.

    CSS for top bar background
    CSS Snippet:

    
    /* CSS - */
    
    /* Top Bar background */
    #top #header_meta {
      background: url('bg-image.png');
    }
    
    
    

    CSS for main menu area background

    CSS Snippet:

    
    /* CSS - */
    
    /* Main menu links */
    
    #top #header #avia-menu li.menu-item > a  {
        background: url('image.pnp');
    }
    
    
    
    

    Best regards,
    Vinay

    #1096235

    Thanks Vinay, I needed the image to span both the #header_meta and #header_main. I’ll keep digging.

    #1096788

    Hi,

    To add a background image to both the header and meta area please use the below code in Quick CSS

    #top #header_meta {
    	background: transparent;
    }

    Go to Enfold > General Styling > Logo Area > Background and upload your image. Please make sure the image large enough to cover the header area or use the repeat option :)


    Best regards,
    Vinay

    #1096937

    Thanks Vinay, I took care of it days ago (differently) and am happy with the result.

    #1097121

    Hi,

    Great, I’m glad that you found a solution and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.