Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 24, 2019 at 4:00 am #1093811
    lzevon

    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!

    April 26, 2019 at 9:39 pm #1094828
    lzevon

    what is the expected response time?

    April 28, 2019 at 1:05 am #1094994
    Mike

    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

    April 29, 2019 at 3:40 pm #1095314
    lzevon

    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.

    May 1, 2019 at 12:10 pm #1096158
    Vinay

    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

    May 1, 2019 at 6:37 pm #1096235
    lzevon

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

    May 3, 2019 at 8:33 am #1096788
    Vinay

    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

    May 3, 2019 at 4:38 pm #1096937
    lzevon

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

    May 4, 2019 at 7:51 am #1097121
    Rikard

    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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘top menu and background image’ is closed to new replies.