Bar below header and before main menu

Hey biggsuccess,

I can’t see any image attached to your message, but you can select to show a bar above the header under Enfold->Header->Extra Elements.

Best regards,
Rikard

Hi,
Thanks for your screenshot, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function banner_below_the_header_and_above_the_main_menu() { ?>
  <script>
// Create the new div element
const newDiv = document.createElement('div');

// Set the text content
newDiv.textContent = 'The Most Comprehensive Alternative Wellness Experience In The Midwest';

// Set the style properties
newDiv.style.backgroundColor = 'gray';
newDiv.style.color = 'white';
newDiv.style.fontSize = '22px';
newDiv.style.padding = '10px'; 

// Add the flexbox properties
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.order = '4';
newDiv.style.flexBasis = '100%';

// Find the element with class "main_menu"
const mainMenu = document.querySelector('.main_menu');

// Insert the new div before the main_menu
if (mainMenu) {
  mainMenu.parentNode.insertBefore(newDiv, mainMenu);
}
</script>
  <?php
}
add_action( 'wp_footer', 'banner_below_the_header_and_above_the_main_menu', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
See the expected results in the screenshot below.

Best regards,
Mike

Hi,

.main_menu {
	padding-top: 20px;
}

Best regards,
Mike

Hi,
I’m not sure what would be “nicer on mobile view”
But this added element is covering your LayerSlider so you could hide this on mobile or add more top margin/padding to your LayerSlider to push it down.

Best regards,
Mike

Hi,
Let’s try adding a custom class “custom-banner” to the div to better manage future changes, and change the font size for mobile from 22px to 12px, this will make the text on mobile closer to what you want, you can even try smaller if you find 12px still to big.
This is the new script:

function custom_banner_below_the_header_and_above_the_main_menu() { ?>
  <script>
// Create the new div element
const newDiv = document.createElement('div');

// Set a class for the new div
newDiv.className = 'custom-banner';

// Set the text content
newDiv.textContent = 'The Most Comprehensive Alternative Wellness Experience In The Midwest';

// Set the style properties for screens above 768px
newDiv.style.backgroundColor = 'gray';
newDiv.style.color = 'white';
newDiv.style.fontSize = '22px'; // Default font size for larger screens
newDiv.style.padding = '10px';

// Add the flexbox properties
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.order = '4';
newDiv.style.flexBasis = '100%';

// Find the element with class "main_menu"
const mainMenu = document.querySelector('.main_menu');

// Insert the new div before the main_menu
if (mainMenu) {
  mainMenu.parentNode.insertBefore(newDiv, mainMenu);
}

// Adjust styles based on screen width
function adjustStyles() {
  if (window.innerWidth < 768) {
    newDiv.style.fontSize = '12px'; // Font size for screens below 768px
  } else {
    newDiv.style.fontSize = '22px'; // Font size for screens 768px and above
  }
}

// Initial adjustment
adjustStyles();

// Adjust on window resize
window.addEventListener('resize', adjustStyles);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_banner_below_the_header_and_above_the_main_menu', 99 );

Please give this a try.

Best regards,
Mike