Magento 2.3 Porto Theme – Fix Header CSS Customization Fail

cssmagento2theme

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:

<?php
    $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>
            </div>
            <div class="bottom-panel">
                <?php echo $this->getChildHtml("currency"); ?>
                <?php echo $this->getChildHtml("store_language"); ?>
                <?php echo $this->getChildHtml("minicart"); ?>
            </div>
        </div>
    </div>

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!

Best Answer

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.

Related Topic