Can you assign Light and Dark Headers, for Overlapping?

Home Page Forums Porto | Multi-Purpose & WooCommerce Theme Can you assign Light and Dark Headers, for Overlapping?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1603

        hi there.
        we are looking the possibility of converting our own website from it’s existing theme into Porto. It would be quite the change, and a lot of work.

        My main concern is not so much rebuilding, as our them uses it’s own VC shortcode, so I know each page would need to be done. Inc Portfolios.

        The concern is the Overlap of the menu/header area.
        Right now our theme has a Light and Dark version, and I can adjust that in CSS, so we can have a 0.3opacity header over an image. Check our homepage:

        I need a simple means of being able to assign this per page, but then to also be able to tweak the level of opacity per page (such as if the background image is lighter).

        I don’t think we have any that have a lighter header, with black text. But the option would be useful.

        My guess is that you will recommend a Template Header. Default. Light. Dark.
        But can you please confirm?

        One of the reasons for this is because we now use Porto for all our sites.
        The other reason is that your Portfolio area, has the correct pagination as well as Canonicalisation, which ours does not.

        It would be a big job, so right now we are not dead set on this.
        But the idea is up there… so need to check on certain features like that.

        Screenshots below show the overlapping. Some have more opacity than others. some of our older blog posts have no overlapping at all.

        Our site does load fast, and performs well. It’s just an enquiry to see how easy incorporating these features would be.



        You must be logged in to view attached files.
        Aizaz Awan

            Hello, @79design-support,

            Thank you for providing us with a detailed explanation of the issues you are experiencing. Allow me to address each of them individually:

            Header Overlay Color:

            a) The header overlay color can be modified or set in two ways. Firstly, you can navigate to the specific page you wish to edit and scroll down to the “Porto Skin Options” section. Here, you will find an option to customize the header color. Please refer to this image for visual guidance: [ ].

            b) Alternatively, if you have created a header using our theme’s “Template Builder,” you can adjust the color of the respective row or section according to your preferences. Please consult this image for reference: [ ].

            I have personally tested both methods on our test site, and they function properly.

            Portfolio Pagination:

            Please note that the portfolio pagination feature is designed to operate exclusively with our theme. Once you have installed and activated the theme, you can configure the pagination settings by navigating to PORTO >> Theme Options >> Portfolios. If you encounter any difficulties, please inform us, and we will be glad to assist you.

            Website Speed:

            Our theme demos are optimized to provide excellent performance. When users install the theme and import the demo data, they typically do not need to optimize the site speed. However, if you modify the demo content with your own content and it is not already optimized, optimizing the content becomes essential for improved speed performance.

            Our theme includes a “Speed Optimization Wizard” feature accessible via the Dashboard >> Porto >> Speed Optimization Wizard. You can utilize this tool to customize the settings based on your requirements and enhance your site’s speed.

            Additionally, I recommend referring to the following articles for more information on optimizing site speed using our theme:


            I trust that the above information addresses your concerns effectively. If you have any further inquiries or require further assistance, please do not hesitate to reach out to us. We are here to help.

            Best regards,
            PThemes Team.


                Hi. thank you.
                I think I am referring more to the ability to setup a Dark and Light headers in CSS in some way.
                right now we use the theme (not yours) to say if it has Overlaying, and then Light or Dark. And then the ID of the header is tweaked in CSS.

                Most pages are Dark.

                I think the vast majority of WP B code is standard, with some icons that are not – similarly to how Porto works.
                Speed wise, dont’ worry.

                It’s more the header. And how easy it is for us to tweak it perhaps in CSS.


                Aizaz Awan

                    Hello, @79design-support,

                    I would like to express my gratitude for your understanding regarding the matter at hand.

                    In relation to the CSS, I would like to inform you that the approach in our PORTO theme remains consistent. Each page within the theme possesses a unique ID, which can be utilized to specify the color of the header, just as you have done with other themes in the past. Rest assured that there is no need for concern in this regard.

                    Wishing you a pleasant day ahead.

                    Best Regards,
                    PThemes Team.

                  Viewing 4 posts - 1 through 4 (of 4 total)
                  • You must be logged in to reply to this topic.
                  Customize Icon
                  Need Customization? We specialize in delivering high-quality web and mobile design/development services to our clientele. Should you require customization services, please do not hesitate to reach out to us at your convenience.