What is the best way to align the Storefront Menu in the center?

If you want to reproduce the issue I'm facing, visit the demo page of the storefront here: then remove the node 

<ul id="site-header-cart" class="site-header-cart menu"></ul>
that contains the cart box (located next to the menu) so that only the main menu remains.

The challenge I'm encountering is trying to center the menu.

I've experimented with various combinations but I just can't grasp the logic behind the WooCommerce/storefront css. It's all very perplexing to me.

This is the CSS code that is currently effective for me...

.woocommerce-active .site-header .main-navigation {
    width: 100%;
}

#menu-primary-menu {
    display: table;
    margin: 0 auto;
}

However, I am clueless about why it only functions with display: table. I attempted using flexbox, but no flexbox rules appear to work at all! It's extremely frustrating to struggle with something seemingly basic.

htmlwordpresscssstorefront

Answer №1

Don't overanalyze their design choices. Here's an alternative approach to consider:

@media (min-width: 768px){
    .woocommerce-active .site-header .main-navigation {
        width: 100%;
        margin: 0;
        text-align: center;
    }
}

This solution eliminates the restricted width and the extra margin causing the "cart" misalignment. With a full-width layout, simply align the text centrally:

https://i.sstatic.net/dhcKM.png

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

What causes the HTML form to display inconsistently when the page is reloaded in the browser?

Why is it that each time this valid HTML5 document is reloaded in the browser, the font and box sizes change randomly? This behavior seems to occur without any logical explanation. Any ideas on why this might be happening? <!doctype html> <htm ...

htmlformsfirefoxbrowserkonqueror

What is the proper way to input a valid path?

I am facing an issue with the path to the CSS folder in the linked picture. The HTML code is working fine, but the CSS seems to be not loading correctly. I suspect that the problem lies in the path. How can I rectify this? I'm unsure of what steps to ...

htmlcssdjangotemplatesdjango-templates

What is the best way to change the value of a div using JavaScript?

i could really use some assistance, i am trying to ensure that only the selected template is shown on the screen, while all others are hidden. The expected outcome should be to replace the values of: <div class="city">City<span>,< ...

javascripthtmlfunction

Ways to specify the encoding for a text iframe embedded in a webpage

Can anyone help me with document embedding in HTML? In my current project, I am directly embedding my update logs as text files into the webpage, along with a selection menu to view all the updates. However, I ran into a minor issue where the Firefox cons ...

javascripthtmliframe

How can you vertically center an icon button in Material UI?

Looking for help with aligning elements in this code snippet: <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" /> <IconButton aria-label="delete&q ...

cssreactjstypescriptmaterial-ui

Wrap the text within the contenteditable div with the <p> tag

By utilizing the code snippet below, I have managed to input text into a contenteditable div and instead of generating a new div on pressing the enter key, it generates <br> tags. Is there a way to enclose the text inside the contentedtiable div wit ...

jqueryhtmlcontenteditable

Turning text into clickable links using JavaScript

I am faced with a scenario where I need to detect phone numbers within a string and convert them into clickable links. At the moment, using an external library is not an option. Here's the progress I've made so far: String: "This is my phone nu ...

javascripthtmlreactjs

Option in the dropdown menu will not appear on the user interface if the data contains the "&" sign

Below is an example dataset I'm using for my dropdown selection: [ { "value":"example1", "name":"example name 1" }, { "value":"example2", "name":"example & name 2" ...

htmlangularjsuser-interfacehtml-select

Why do CSS Variables have different syntax for setting and getting values?

When we use CSS Variables, also known as CSS Custom Properties, the syntax for setting and getting values is different. To set a value for --my-custom-width, we use: :root { --my-custom-width: 120px; } Similarly, to get the value of --my-custom-width, ...

csscss-variables

Tips on finding the key associated with a specific value

When a form is submitted, one of the fields being sent is an ID number instead of the name for easier processing by the server. For example: HTML dropdown select <select ng-model="myColor" class="form-control" ng-options = "color.ID as color.color ...

javascripthtmlangularjsjsonangular-ngmodel

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

javascriptjqueryhtmlvideoios5

What is the best way to obtain the current cursor location in draft.js?

As part of my draftjs project, I'm working on implementing a feature that allows users to easily insert links. One approach I've taken is creating a popup that appears when the shortcut cmk + k is pressed. To enhance the user experience, I am cu ...

javascripthtmlreactjsnext.jsdraftjs

"Using a CSS pseudo element to create stylish separators between elements

Can CSS pseudo elements :after or :before be used to clear floats between elements? If not, what other method can be used to clear floats between <div class="float"> and <section class="inner">? The HTML and CSS structure is as follows: * { ...

htmlcss

I am searching for answers to solve issues related to a JSON file

I am currently working on a tool that searches for matches in an input field by comparing the keywords entered by the user with a JSON. During my testing phase, I focused on using a single API that provides information about different countries and fortun ...

htmljsonangulartypescript

Format six images in a horizontal row for desktop and ensure they resize appropriately for mobile viewing

I am looking to arrange images of different sizes in rows depending on the device orientation. For desktop, I want 6 images with proper margins, 2 images in a line for portrait, and 4 images for landscape orientation. Any extra images should be placed in a ...

csssassbootstrap-4

Trouble with meta og:image on my SSL-secured WordPress site

Having some trouble adding meta properties to my WordPress website that is SSL certified. When I share the link on Skype and WhatsApp, the og:image is not working. I've tried multiple plugins and even directly added HTML code to my WordPress theme hea ...

phphtmlcsswordpressmeta-tags

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

javascriptphpjquerycssdatatables

How to utilize the reduce method with an array of objects in JavaScript

Every week, a number of objects are delivered to me. Each object contains information such as date, hours, and other fields. I need to arrange these objects in an array based on the total hours for each day. Here is an example of the objects: var anArray ...

javascriptjqueryhtmlsalesforcereduce

Converting Greek text to UTF-8 using Javascript

Currently, I am working on a project with my teacher to digitalize a Greek textbook by transforming it into an online application. This process involves the conversion of a Shapefile, which draws polygons on maps along with polygon descriptions, and mappin ...

javascripthtmlutf-8leafletshapefile