Support Center Visit Demo License manager Buy @ envato

Change background color for main menu

donniedatadonniedata
in Menu / Mega menu

I would like to make the background color of the main menu black for the full width of the screen and leave the background behind the header white.

http://www.theyoglates.com/


Comments

  • PhilPhil

    Hello,

    Sorry, but I quite do not understand.

    Can you explain it to me in more detail, please?

    It would be great if you attach a screenshot showing how you want it to look like.


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • donniedatadonniedata

    Sure. Here is a screenshot of what it needs to look like. I would like the section with the logo to have a white background from the left side of the page to the right and I would like the menu to have a black background from the left side of the page to the right side like below.

    betheme_forum.jpg


  • PhilPhil

    This will not be able to be done with the header styles and colors from the theme options.

    But you can use the Header Builder plugin.

    Please, check the following links about this tool.

    https://support.muffingroup.com/video-tutorials/how-to-build-a-custom-header/

    https://support.muffingroup.com/documentation/header-builder/

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • donniedatadonniedata

    Thank you for helping on this. I started using the Header Builder and I am having an issue with the colors. For example, I added the button to the right of the logo and it is displaying with incorrect text and button colors from what I have set in the Header Builder

    image.png
    image.png


    Also, I set the second row to have a background color #000000 and it is not working.

    Any idea why these colors are not working correctly?

    Thank you

  • PhilPhil

    1) Are you using a custom buttons style in Theme options? If yes, then it might mean that the buttons in the header take their display from there and not the ones you set individually for them.

    obraz.png

    We will take a closer look at this issue and fix it as soon as possible, but at this moment, if you want to change the look of buttons you need to do it through theme options.


    2) Please open the second-row options and check if you do not have the transparency set to 100%.

    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • donniedatadonniedata

    Thanks for looking into this.

    The Transparency was set to 0%. It wqs defaulted that way which seems strange to me. I set the transparency to 0% and the background is now working.


    I am using custom buttons; however, the colors that I have chosen are not working either.

    image.png

    Thanks

  • PhilPhil

    Did you change the Action button color?

    Because the buttons from the header take their display from there.

    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • donniedatadonniedata

    That was it. I didn't realize the Action button settings were needed if the Action Bar was not turned on for the Custom Header.

    Thanks.

    I am also having an issue with the Footer. I have it set to Full Width, but there is a massive margin on the left and right of the 2 widgets.

    image.png

    We want it to look like this

    image.png

    And here are the settings in Theme Options->Footer

    image.png

    Thanks again

  • PhilPhil

    There are some CSS that causes it, and they do not come from our theme.

    obraz.png

    Probably one of your plugins adds them. So, please, disable your plugins one by one, and check which one is the source of this code.


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • donniedatadonniedata

    Thanks. There was a plugin that was affecting it and when I disabled it, the footer changed to full width.

    I am having an issue with the first row of the custom header. I have a logo in the center section and a button in the right section. There is nothing in the left section. How do I get the logo in the center section to be in the center of the first row?

    image.png


    image.png

    Thanks again

  • PhilPhil

    Please, add the Text item to the left, and inside it put div with 315px width.

    obraz.png
    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • donniedatadonniedata

    That did the trick. Thanks again

Sign In or Register to comment.