Title: help centering menu
Last modified: August 4, 2019

---

# help centering menu

 *  Resolved [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/)
 * I had some help creating a custom theme based on 2019
    The developers on Freelancer.
   com dont understand child themes at all …but thats a rant for a different day
 * Can anyone here help me center the header menu text ?
 * Ive tried adding “additional css” its ignored –
 * i think the trouble is here from header.php is
 *     ```
       $args = array( 'menu' => '114th', 
           		'container' => '', 
           		'container_class' => '', 
           		'container_id' => '', 
           		'menu_class' => 'main-menu nav navbar-nav navbar-right', 
           		'menu_id' => '',
           		'echo' => true, 
           		'fallback_cb' => 'wp_page_menu', 
           		'before' => '', 
           		'after' => '', 
           		'link_before' => '', 
           		'link_after' => '<span class="weather-sub-menu"><i class="fa fa-angle-down"></i></span>', 
           		'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 
           		'item_spacing' => 'preserve',
           		'theme_location' => 'Primary Menu' );
           		wp_nav_menu( $args ); 
               ?>
           </nav>
       ```
   
 * the text inst centered and for some reason they have hard coded the menu name
 * Thanks in advance
    -  This topic was modified 6 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhelp-centering-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/help-centering-menu/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/help-centering-menu/page/2/?output_format=md)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11796044)
 * What do you mean by centering the menu text?
 *  Thread Starter [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11796055)
 * I want the menu items centered between the logo and the weather widget
 * Sorry I wasn’t clearer
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11796095)
 * I think the first step is to tackle the HTML order of the things in your header
   menu, which is currently incorrect.
 * Right now the order is:
    1) Logo 2) Weather data 3) Navigation
 * Whereas it should be:
    1) Logo 2) Navigation 3) Weather data
 * The Weather data should also be moved outside of the `<nav>` element.
 * Right now the HTML structure is this:
 *     ```
       <header>
         <logo />
         <nav>
           <weather />
           <menu>
         </nav>
       </header>
       ```
   
 * Whereas it should be:
 *     ```
       <header>
         <logo />
         <nav>
           <menu>
         </nav>
         <weather />
       </header>
       ```
   
 * Then you’ll have a far easier task of styling it, as it is in its natural position.
 *  Thread Starter [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11796819)
 * THANKS !!
 * well I moved the Weather html towards the end of the file
    ironically now the
   weather widget is in front of the menu Confused
 *  Thread Starter [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11796834)
 * here is current header
 * _[ Deleted ]_
    -  This reply was modified 6 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
 *  Moderator [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
 * (@jdembowski)
 * Forum Moderator and Brute Squad
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11796864)
 * [@dougboss](https://wordpress.org/support/users/dougboss/) Please do not post
   large HTML or PHP like that here, it doesn’t work after ~10 lines or so.
 * If you need share that data please use [https://pastebin.com/](https://pastebin.com/)
   instead and post the link to that paste.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11797130)
 * Nice work.
    Can you now add this to your “Additional CSS” part of the dashboard:
 *     ```
       @media screen and (min-width: 1101px) {
           /* With the exception to the #header height, this resets the header styles to work with flexbox */
           #header {
               display: flex;
               height: 120px;
               justify-content: center;
           }
   
           #header .container,
           .weather_topdata {
               max-width: 190px;
               width: auto;
           }
   
           #header .container {
               margin: 0;
           }
       }
       ```
   
 * Does that do what you want? If not we can work on it
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11797146)
 * If you’d like to add spacing between the navigation, logo and weather data, you
   can do so within the media query with Margin:
 *     ```
           #header nav {
               margin-left: 50px;
               margin-right: 50px;
           }
       ```
   
 *  Thread Starter [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11798447)
 * Andrew – you are my hero !! THANKS !! thats awesome
 * Since you are todays genius , do you know why the page refreshes before it displays?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11798477)
 * That’s kind. Your website seems to refresh because a script is putting an overlay
   on top of your website to cover it and then fades it in when everything is ready.
   I don’t think that’s something from Twenty Nineteen and I would recommend checking
   your plugins for that functionality. In my opinion it’s a bad experience because
   it gives the user the impression that the page is taking a long time to load 
   anything and we know that users don’t like waiting.
 *  Thread Starter [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11798579)
 * I have pretty basic plugins. Jetpack etc.
 * I renamed the plugin folder and the refresh seems to persist
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11798600)
 * It’s part of your custom theme’s JS
 *  Thread Starter [DougBoss](https://wordpress.org/support/users/dougboss/)
 * (@dougboss)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11798978)
 * I have almost zero experience w js.
 * I’ll Google it …
 * Thanks again for your help
 * Fix the refresh and the mobile menu are the next items to address
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11799085)
 * The refresh is coming from main.js, in your custom-theme:
 *     ```
       	// Preloader
       	$(window).on('load', function() {
       		$("#preloader").delay(600).fadeOut();
       	});
       ```
   
 * Remove that.
 * Then also remove the CSS that puts it in place (lines 465 to 503)
 *     ```
       /*------------------------------------*\
       Preloader
       \*------------------------------------*/ 
       #preloader {
       	position:fixed;
       	left:0;
       	right:0;
       	top:0;
       	bottom:0;
       	background-color:#FFF;
       	z-index:9999;
       }
       #preloader .preloader {
       	position:absolute;
       	left:50%;
       	top:50%;
       	-webkit-transform: translate(-50% , -50%);
       	-ms-transform: translate(-50% , -50%);
       	transform: translate(-50% , -50%);
       }
       #preloader .preloader:after {
       	content:"";$wind_high_gust
       	display:block;
       	width:40px;
       	height:40px;
       	border: 1px solid #EBEBEB;
       	border-top: 1px solid #700105;
       	border-radius: 50%;
       	-webkit-animation: 1s preloader linear infinite;
       	animation: 1s preloader linear infinite;
       }
       @-webkit-keyframes preloader {
       	from { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
       	to { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
       }
       @keyframes preloader {
       	from { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
       	to { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
       }
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/#post-11799090)
 * I’m not trying to be vague, I just assumed you’d know about the preloader as 
   it’s inside the custom theme that you’re creating.

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/help-centering-menu/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/help-centering-menu/page/2/?output_format=md)

The topic ‘help centering menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentynineteen/3.3/screenshot.
   png)
 * Twenty Nineteen
 * [Support Threads](https://wordpress.org/support/theme/twentynineteen/)
 * [Active Topics](https://wordpress.org/support/theme/twentynineteen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentynineteen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentynineteen/reviews/)

 * 18 replies
 * 3 participants
 * Last reply from: [DougBoss](https://wordpress.org/support/users/dougboss/)
 * Last activity: [6 years, 10 months ago](https://wordpress.org/support/topic/help-centering-menu/page/2/#post-11799465)
 * Status: resolved