Porto theme header CSS customization fail - Magento 2.3

Question

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!

• Ayesha Tabassum: 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="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd
• ahmed hussain: @Ayesha Tabassum Did you get the porto theme fix, if yes please share the solution.

Answer 1

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.

• myrdipiombo: 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?
• fmsthird: can you post your custom css that you added from custom settings? only the line you added
• myrdipiombo: 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;
• myrdipiombo: 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.
• myrdipiombo: 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...