I hope someone will help me, I have searched everywhere on the community looking for this.

Porto theme gives 20 pre-made styles for the header, but for the website that I am trying to make I wanted to do something different mixing between the styles already given.

I have tried to modify colors and add custom settings from the Stores > Configuration > Porto theme panel, but nothing happens.

So I have been started searching for the stiles directly inside the child theme folder to modify them manually, and I have found the styles in the pub\media\porto\web\css\header folder. I have tried to make some changes to them and flushed the cache, but nothing still happens.

So I thought the theme takes the info from another part, and not from the types folder. I have searched for the header.phtml, found in the root app\design\frontend\Smartwave\porto_child\Smartwave_Porto\templates\html, and the file is kinda like:

    $header_type = $this->getConfig('porto_settings/header/header_type');
    $header_new_skin = $this->getConfig('porto_settings/header/new_skin');
    $class = $header_type == 17 || $header_type == 19 || $header_type == 16 || $header_type == 20 ? 'header-newskin':'';
    if(isset($header_new_skin) && $header_new_skin && ($header_type == 2 || $header_type == 5 || $header_type == 6 || $header_type == 7 || $header_type == 8 || $header_type == 13))
        $class = 'header-newskin';
    if(isset($header_new_skin) && $header_new_skin && $header_type == 10)
        $class = 'header-new-skin';
<header class="page-header type<?php echo $header_type; ?> <?php echo $class;?>" >
<?php echo $this->getChildHtml("header_customer_form_login"); ?>
<?php if($header_type == 3 || $header_type == 4 || $header_type == 9): ?>
    <div class="header content">
    <?php echo $this->getChildHtml("logo"); ?>
    <?php echo $this->getChildHtml("navigation.sections"); ?>
        <div class="panel header">
            <div class="top-panel">
                <?php echo $this->getChildHtml("skip_to_content"); ?>
                <span data-action="toggle-nav" class="action nav-toggle"><span><?php /* @escapeNotVerified */ echo __('Toggle Nav') ?></span></span>
                <?php echo $this->getChildHtml("header.links"); ?>
                <div class="search-area">
                    <a href="javascript:void(0)" class="search-toggle-icon"><i class="porto-icon-search"></i></a>
                    <?php echo $this->getChildHtml("top.search"); ?>
            <div class="bottom-panel">
                <?php echo $this->getChildHtml("currency"); ?>
                <?php echo $this->getChildHtml("store_language"); ?>
                <?php echo $this->getChildHtml("minicart"); ?>

And it continues with else if for every type.

Actually I have this header as in the attached photo, but I want to make a new one with links on the sides, logo in the middle, and menu under all with a black background with opacity of 60%.

Header Obviously you won't see very well category links because they are black, I have tried to give them white color but ant try works!

I am conscious that I am talking about a third-party extension but it is a very diffused theme so I think someone could find this question useful too.

Thanks in advance to everyone!

2 Answers 2


You can remove this file pub/media/porto/configed_css/design_default.css,
then go to Porto – Design Panel > Save Config.

Run cache:flush
See the changes if your custom css take effect.

  • Thank you for your reply. I have tried to do what you said and make some test changes but anything still happens. Also to change the disposition of links and menu block over the header, which file I have to modify to make this kind of changes? Jan 9, 2019 at 9:59
  • can you post your custom css that you added from custom settings? only the line you added
    – fmsthird
    Jan 9, 2019 at 10:01
  • This is the one live on the homepage, in the test I have tried to change background color and font color: .block-category-list .block-title,.filter-options-title,.filter .filter-current-subtitle { border: none; background-color: transparent; padding: 16px 20px 4px 20px; font-size: 15px; text-transform: uppercase; font-weight: 600; color: #21293c; letter-spacing: 0.01em; Jan 9, 2019 at 10:03
  • To be sure I have done another test changing all the background colors from transparent to black in custom settings to see if something happen, but nothing. Jan 9, 2019 at 10:04
  • 1
    I have done it and flushed the cache, but nothing happens. Also trying with different colors I had no difference. To make another test, I have tried to fully delete what written on Custom settings, and I had any change to the website. So it seems that any change that I write on that box is effecting... Jan 9, 2019 at 10:16

I am still facing this issue, the default.xml with in Smartwave_Porto folder in app/design/frontend/Smartwave/porto/ is not working and head.phtml is not getting called and hence no css files are been called .. i have put echo exit nothing is working. Please guide me to solve this issue

<?xml version="1.0"?>
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="head.additional">
            <block class="Smartwave\Porto\Block\Template" name="porto_custom_head" template="html/head.phtml" before="-"/>
        <referenceContainer name="after.body.start">
            <block class="Magento\Newsletter\Block\Subscribe" name="porto_newsletter_popup" template="subscribe_popup.phtml" before="-"/>
            <block class="Smartwave\Porto\Block\Template" name="porto_sidebar_sticky" template="html/sidebar_sticky.phtml" after="-"/>
        <referenceContainer name="page.wrapper">
            <block class="Smartwave\Porto\Block\Template" name="porto_header" template="html/header.phtml" before="main.content">
                <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                        <argument name="css_class" xsi:type="string">header links</argument>
                <block class="Smartwave\Porto\Block\Form\Login" name="header_customer_form_login" ifconfig="porto_settings/header/login_popup" template="Smartwave_Porto::html/login.phtml"/>
                <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
                <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
                <block class="Smartwave\Porto\Block\Template" name="custom_block" template="html/header_custom_block.phtml" ifconfig="porto_settings/header/static_block" after="-"/>
            <block class="Smartwave\Porto\Block\Template" name="porto_custom_notice" template="html/custom_notice.phtml" after="-"/>
        <move element="navigation.sections" destination="porto_header"/>
        <move element="top.search" destination="porto_header"/>
        <move element="minicart" destination="porto_header"/>
        <move element="currency" destination="porto_header"/>
        <move element="logo" destination="porto_header"/>
        <move element="skip_to_content" destination="porto_header"/>

        <move element="page.top" destination="page.wrapper" after="porto_header"/>

        <referenceContainer name="header.container" remove="1"/>
        <referenceContainer name="header.panel" remove="1"/>
        <referenceContainer name="header-wrapper" remove="1"/>

        <referenceContainer name="footer-container">
            <block class="Smartwave\Porto\Block\Template" name="footer_block" template="html/footer.phtml">
                <block class="Magento\Store\Block\Switcher" name="footer.store_switcher" template="switch/stores.phtml"/>
                <block class="Magento\Newsletter\Block\Subscribe" name="footer.newsletter" template="subscribe_footer.phtml"/>

        <referenceBlock name="header.links">
            <block class="Smartwave\Porto\Block\Template" name="custom_link" before="-" template="html/custom_link.phtml" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.