Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
  • #26127

    Hi there,

    Thanks for the great theme. I made the heading: “Non-Fixed Header with social icons and additional navigation”. The new top area comes light gray. How do I change the background color?




    Yea got the same question… If i change the color the whole backround is changing not only the navigation bar. And is it possible to change the transparency of it?


    Hi Dayna,,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #header_meta {
    background: #333;

    Change the color code to whatever color you want it to be.

    @ Crippy – To change its opacity, you would just use a RGBA color instead and have the transparency to whatever you wanted. See:




    great, thank you! That worked great. Another question I have is if its possible to have 2 footers set up? So there would be the footer as is and then a duplicate area that could be a different color. Thanks!


    Oh, and also I have white lines running across the background of my site. How do I remove those?


    How is the CSS code called for the navigation bar “#header” ?


    Hi abundancing,

    No, you can only have a single footer. But you could remove the footer with the Layout meta box options and then attempt to duplicate a footer using the Advanced Layout Editor layouts.

    The background white stripe is because your background image has that at the top:

    @ Crippy, I don’t understand the question.




    I just want to know how the code is called for the headersection to fill in the RGBA Colors

    #header_backround {

    color:rgba(255, 0, 0, 0.25);




    Alright i got it. I edit the Quick CSS Box with:

    #header {

    background-color:rgba(255, 0, 0, 1);


    The Header goes red but not like here:

    It is to light. What do i have to do to get the color like that?


    You can use this converter: to convert your hex colors to rgb. Just choose your favorite red, them enter the hex color into the text field and click on “Hex 2 RGBA”.


    Hi Dude,

    i know now how the system works, but if i use the code in Quick CSS all the time the color don’t look like it should be.

    For example:

    #header {

    background-color:rgba(252, 150, 30, 1);


    looks like:

    But the color should be:

    Whats wrong?


    Please answer…



    Can you post a link to the website please – I’ll investigate the css code. You can also try to add the code to a child theme stylesheet or to enfold/css/custom.css.

    Best regards,



    I edit: /* General Custom CSS */

    Same thing.


    Name: test

    PW: test


    Is it done?



    Yes, please try to add following code into the quick css field

    .header_bg {
    opacity: 1 !important;

    Best regards,



    Now i have this. But still don’t work :(

    #header {

    background-color:rgba(255, 0, 0, 0.6);


    .header_bg {

    opacity: 1 !important;




    Please use this:

    .header_color .header_bg {
    background-color: rgba(255, 0, 0, 0.6);




    After 2 weeks finally it works. Thanks man!

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘change background color for top heading section’ is closed to new replies.