Adjusting the width of the header in Wordpress themes like Genesis and Foodie Pro

Struggling with the header appearance on my website. I want the blue section to be full width while keeping the logo and navigation the same width as the content area (1040px). I'm new to Wordpress and unsure how to make this adjustment.

Someone suggested adding a wrap around the "site-header" but I need guidance on how to do this in Wordpress.

No idea what code to provide, but here's a snippet to get started:

/*
Site Header
---------------------------------------------------------------------------------------------------- */


.foodie-pro .site-header {
background-color: #0099CC !important;
margin-left: auto;
margin-right: auto;
}

.genesis-header {
background-color: #000000 !important;
}

.foodie-pro .site-header {

background-position: left;
margin-top: 30px;
}

.title-area {
width: 450px;
}

.header-image .title-area {
padding: 0;
}

.title-area h1 {
margin: 0 auto;
}
.title-area p {
margin: 0;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
display: block;
text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header {
background-size: 450px 177px !important;
}

.header-image .site-title a {
float: none;
min-height: 177px;
width: 450px;
}

/*
Site Navigation
------------------------------------------------------------------------...



<header class="site-header" itemscope itemtype="http://schema.org/WPHeader"><div class="wrap"><div class="title-area"><h1 class="site-title" itemprop="headline"><a href="http://www.livingthelighterlife.com/">Living the Lighter Life</a></h1><p class="site-description" itemprop="description">Eat Clean. Train Hard. Live Lighter.</p></div></div></header><h2 class="screen-reader-text">Main navigation</h2><nav class="nav-primary" itemscope itemtype="http://schema.org/SiteNavigationElement" id="genesis-nav-primary" aria-label="Main navigation"><div class="wrap"><ul id="menu-main" class="menu genesis-nav-menu menu-primary"><li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-119"><a href="http://www.livingthelighterlife.com/sample-page/">Breakfast</a>
<ul class="sub-menu">
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://www.livingthelighterlife.com/recipes/">Recipes</a></li>
</ul>
</li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120"><a href="http://www.livingthelighterlife.com/sample-page/">Lunch</a>
<ul class="sub-menu">
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://www.livingthelighterlife.com/recipes-new__trashed-2/">Recipes NEW</a></li>
</ul>
</li>
<li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-121"><a href="http://www.livingthelighterlife.com/sample-page/">Dinner</a>
<ul class="sub-menu">
<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-obje......

csswordpress

Answer №1

To achieve the desired look, simply encase your header and navigational elements within a <div> using the same CSS styling. Alternatively, you can opt to nest your navigation inside your header, creating a structured layout like this:

<header>
    <div class="logo__container">Content</div>
    <nav>Navigation Content</nav>
</header>

Ensure that your header is styled similarly to your content container with the following CSS:

.header {
    width: 1040px;
    display: block;
    margin: 0 auto;
 }

Answer №2

To achieve your desired result, make sure to set the following:

.header-container{
 max-width: 1040px;
}

#menu-primary{
 max-width: 1040px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 2em;
}

To make the mobile hamburger menu function properly, adjust the top property value to 35px;

@media screen and (max-width: 1039px){
 button#mobile-menu-button {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 35px; /*This is the updated value*/
    right: 5%;
 }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

htmlcssmobile

Tips for ensuring that content doesn't shift down when clicking a drop-down menu

I currently have three dropdowns that function as an accordion. When I click on one dropdown, the rest of the content below shifts down, which is not the behavior I want. Is there a way to prevent the content below each dropdown from moving when a dropdow ...

jqueryhtmlcss

Tips for utilizing append and remove to modify HTML forms

Currently, I am working on a WordPress project that requires the use of append and remove for dynamically changing forms in HTML. I attempted to implement this functionality, but encountered some errors. The code snippet below provides a brief overview of ...

javascriptjqueryhtmlwordpressforms

Hiding CheckBox items within a CheckBoxList control in ASP.NET

Currently, I am working with a CheckBoxList control that is bound to data and can potentially become very large. In order to manage this, I am implementing a filter mechanism. Here is my approach: foreach( ListItem item in this.UserRolesList.Items ) { ...

c#asp.netcsschecklistbox

Using Selenium's findElement method along with By.cssSelector to locate elements with multiple classes

I'm a beginner with selenium. Can someone explain how to locate an element that has multiple classes and values? <div class="md-tile-text--primary md-text">Getting Started</div> using the findElement method By .css Selector. ...

cssselenium-webdriver

Display my search box when the button is activated

I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Al ...

htmlcssmodx

Adjusting page layout following window dimension changes

Every time I work on developing HTML pages, I encounter issues with window resizing. The alignment of the page gets disrupted and elements end up overlapping each other. I want my page to maintain its layout when resized, with scrollbars appearing instea ...

htmlcss

Display a floating label above the text input when it is focused or when it holds text

I am trying to create an animated search bar where the label moves from being over the text input to above it. I came across a helpful example in a fireship.io video, which includes the CSS and HTML code available here The example I found demonstrates the ...

htmlcssreactjssass

I'm having trouble getting the "flex direction: row" property to work within a table row

First, I applied flex to the table > tr. Next, I configured the flex-direction to be row. table { width: 100%; } tr { display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; width:100%; } td:nth-child(1) { flex: 0 0 20%; ...

htmlcssflexbox

utilizing different background colors for rows in a Laravel table using CSS

Is there a way to implement alternate row coloring in a Laravel table using CSS? I want to have different colors for every other row. I have applied the "gridview" CSS class to the table. Specifically, I want to use the .gridview tr.even td selector for th ...

phpcsslaravellaravel-5

The transitioning period caused the gooey effect to become distorted

I'm currently working on creating a radio button with a gooey effect. The transition looks great, but once it's complete, the colors don't blend well and the edges glow in an odd way. I've been searching for the root of the issue, but ...

jquerycsssvg-filters

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

javascripthtmlcssscroll

Exploring Object Attributes in React

I'm working on a React app where I have an array of objects in a file called users.js, and another file named contacts.jsx. In the contacts.jsx file, I am trying to display a Material UI card and access the properties of the object within that card. ...

htmlcssreactjs

Creating my website with a unique inverse color scheme

I'm looking to change the color scheme of my webpage so that it is inverse (white becomes black and black becomes white) similar to the Dark Reader chrome extension: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbiee ...

javascripthtmlcss

Utilize Css3 MediaQueries to nudge @Media switch for hyperlinks

My website currently utilizes css3-mediaqueries.js for a mobile-friendly design, which is working well. However, some users are still requesting to view the "web-version" instead. Is there a way to override the current CSS on the homepage, specifically the ...

cssmedia-queries

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss

Adjust the contents of a div to automatically fit within a hidden overflow div

Trying to fit the contents of a div (including an image, search bar, and three buttons stacked on top of each other) into another div with CSS styling that hides overflow has been a challenge. The CSS code for the div in question is: .jumbotron { overfl ...

jqueryhtmlcssbootstrap-4

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...

javascriptjquerycssknockout.jscustom-binding

The Fab Button from Material UI remains beneath the left split-pane

Is there a way to ensure the Fab button is completely visible? The left side often gets hidden under the left pane. I attempted to increase the z-index, but it did not have any effect. View on CodeSandbox <UpperPane> <Fab ...

cssmaterial-uisplitpane