How to center the navigation text on a WordPress website within the header.php file

Check out my website at

I'm looking to center the navigation menu under the image.

I've attempted multiple methods but can't seem to figure it out.

Here's a snippet from the header.php file:

        <center><img src="http://www.saraandcompany.ca/wp-content/uploads/2014/03/weblogo.png" style="PADDING-BOTTOM:15px"></center>

    <h1 id="main-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

    <nav>
        <?php $args = array(
            'show_home'   => Work,
            'sort_column'  => 'menu_order, post_title'
            ); ?>
        <?php wp_page_menu( $args ); ?> 
    </nav>

    <div class="clearfix"></div>
</header>

Thank you in advance for your help!

csswordpresscenter

Answer №1

To improve the layout, make some adjustments to the CSS code:

nav {
  float: none; /* Update */
}

.menu {
  display: inline-block; /* Keep */
  margin-left: 20px; /* Update */
}

nav li {
  display: inline;
  margin-left: 20px; /* Update */
  margin: 0 10px; /* Add */
}

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

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

Position the Crossmark to align with text using CSS styling

How can I properly align a crossmark and a checkmark with the text behind them? The checkmark looks aligned well, but the crossmark appears to be slightly off to the top-right. I'm hesitant to adjust margins and paddings as it may cause issues when th ...

htmlcssbootstrap-5

"Can you provide instructions on placing a span within an image

I am trying to figure out how to insert a <span> into an <image>, similar to the effect on the page . However, I do not want this effect to occur on hover(), but rather on click(). My goal is to insert "data-title" into the <span> and hav ...

javascriptjqueryhtmlcss

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

Aligning Elements in the CSS Bootstrap Grid

Struggling to achieve perfect center alignment of an HTML element using the Bootstrap grid framework. Here's the current code: <div id="rentals" class="container pb-4"> <div class="row pt-5 mt-5 mb-4"> ...

htmlcssbootstrap-4grid

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

htmlcsswordpresshtml-lists

Learn how to smoothly transition between AJAX pages by toggling a class on click for a seamless animation

I am currently working on a practice project that involves loading each page via AJAX and displaying a fadeIn, fadeOut transition using CSS animation opacity. However, I am facing an issue where the addClass and removeClass functions are not being execute ...

javascriptjquerycssajax

Singularize button/solo in the center

How can I make this button align perfectly center on both PC and Mobile as a container? I have attempted the following CSS and HTML code: <section id="jour"> <div class="container"> <button class="btn1">Jeudi 12</button> ...

htmlcss

Changing a background image url using jQuery by clicking a button

I'm struggling to find a way to use jQuery to add a background image URL to my CSS. Everything I've attempted so far has been unsuccessful. let button = document.querySelector('form button.btn') button.addEventListener('click&ap ...

javascriptjqueryhtmlcss

Modify the location of the input using jQuery

Hey there, I've got this snippet of HTML code: <div class='moves'> <div class='element'><input type='text' value='55' /></div> <input class='top' type='text&apo ...

javascriptjqueryhtmlcss

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...

htmlcsstwitter-bootstrapbootstrap-5

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

Extracting names from HTML can be done easily by looking for the "@" symbol that the

My HTML structure looks like this: <table id="table-15244" cellspacing="0" class="comment"><tbody> <tr id="comment-37"> <td style="color: #999" class="NV"> </td> <td class="hidden-mob"> ...

javascriptjqueryhtmlcss

Place elements in a grid layout using CSS (and also ensure they are centered)

My goal is to create a data-grid (table layout) where the elements have fixed sizes. These elements should be placed in the same line until they can't fit anymore, then move to the next line. I have tried using inline-blocks for this, but I'm st ...

htmlcss

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

cssinstallationlesshttp-status-code-403

Centered scaling of SVG graphics

Lately, I've been exploring ways to make my website's logo fill the entire background in a unique way. The concept is to have the browser viewport gradually "dive" into the center of the logo. In order to achieve this effect, I decided to create ...

jquerysvgjquery-animatescalecenter

Ensure that a specific value is maintained for a property of an element throughout its animation

There are two distinct types of components that I am working with, which I will refer to as .a and .b. It is possible that these components have been assigned certain CSS animations. I do not have the ability to control these keyframes, whether they are a ...

javascriptcssanimationkeyframe