Having an outdated WordPress theme from 2010, I wanted to give it a modern touch by adding a sticky header. I found a plugin called myStickymenu that seemed to work well. However, my current theme's header has a fixed width of 960px and I desired to make it full-width.
In an attempt to customize the HTML/CSS code of my theme and expand the header width, I encountered challenges with aligning my navigation menu and other elements within the header.
Here is the HTML CODE:
<header id="header">
<div class="container_header clearfix">
<div class="menu-row-top clearfix">
<div class="test-text"> This is some random text </div>
<!-- NAVIGATION -->
<nav class="primary">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</nav><!--.primary-->
</div>
</div>
</header>
And here is the CSS CODE:
#header {
width: 100%;
position: relative;
z-index: 99;
}
.container_header{
background: #0459b5;
}
nav.primary {
position: relative;
z-index: 2;
}
The provided code results in having the test-text at the extreme left of the blue header bar and the navigation menu at the far right. Many suggestions to add a max-width property were considered. Using:
.menu-row-top {
max-width: 960px;
}
However, this caused all content to shift to the left within a div of 960px width. The goal is to achieve a correct HTML/CSS combination for centrally aligning elements within .menu-row-top on the header bar for easier navigation across different screen resolutions. The aim is to have everything aligned horizontally and then use CSS for proper positioning.