help centering menu

What do you mean by centering the menu text?

I want the menu items centered between the logo and the weather widget

Sorry I wasn’t clearer

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.

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

here is current header

[ Deleted ]

• This reply was modified 5 years, 4 months ago by Jan Dembowski.

@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/ instead and post the link to that paste.

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

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;
    }

Andrew – you are my hero !! THANKS !! thats awesome

Since you are todays genius , do you know why the page refreshes before it displays?

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.

I have pretty basic plugins. Jetpack etc.

I renamed the plugin folder and the refresh seems to persist

It’s part of your custom theme’s JS

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

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);}
}

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.