skyewelse

Hi Ceslava!

Okay, so what you said here, but the opposite. 🙂

Let´s see if I finally understood what you need. You want to center the menu with no background surround it.

What I was hoping to achieve was a full background bar, but with a centered navigation on top. But thanks to your new code I was able to figure it out and it now looks exactly how I was hoping, which tests fine for desktop and mobile devices. Hurray! 🙂

Here’s the new version of the navigation on the site:
http://retro-type.com/blowingdust/

And the custom CSS code I have in place is as follows. It could probably be cleaned up some I’m sure, but it’s working for now at least!

#sidebarcompartir, #site-navigation .searchform {display:none !important};

@media only screen and (min-width : 777px) {
#header .logo{
	width:800px;
}
}

 .wp-caption .wp-caption-text {
 font-size: small;

 margin: 0.8075em 0;
 }

/* navigation items hover background */
#site-navigation li:hover {
    background-color: #52c5ff;
}
.todocontenido div.focus-post {
    opacity: 1;
}

#site-navigation ul {
display: -ms-flexbox;
display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    float:none;
   justify-content: center;

}

#site-navigation {
    width: 100%;}

#site-navigation, #site-navigation ul {
    background: #2e2e2e;
}

 #site-navigation div > ul > li {

 background: #2e2e2e;

}

#content, .slider, .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed, .author-bio, #content .widget, .btn
{ width: 777px;}
}

Thank you very much again for your help! The site looks amazing. Definitely my favorite WordPress theme so far. It’s perfect for what we needed!

-Thomas
SkyeWelse

Sweet! Thank you very much. The code for disabling the hover effect works very well. I can see the hover being very useful for matted backgrounds that are one color, but the way I’ve got it setup split between two images that would be on either side of published article posts, it was more jarring than anything else, so I’m very happy you were able to help with disabling it. It makes this particular site look a lot cleaner I think in terms of functionality. 🙂

I tried the code for the background bar and I see what it does, with removing the color from the bar when scrolling further down the page. It’s kind of neat so I’m going to keep that code in there for now, but I guess what I was looking to see if it were possible to have the navigation look a bit more like this by default (not necessarily with scrolling down the page, where it jumps back to being left aligned with a background bar.

<—White-BG-Bar — Centered-Nav-Menu — White-BG-Bar —> Full width 100%.

Right now I have the pixels of the nav bar being set at 777px, because that is the exact size of the nav bar menu (with my nav options anyway) without going over. If I had the background bar color set to white and I set the pixel size of the nav bar to say… 800 pixels, it would display something like this:

<—No-BG-Bar — Centered-Nav-Menu — White-BG-Bar (for 23 pixels only) —>

If this is too much trouble, no worries, I can definitely live without the white BG bar, but I thought it might help add a nice transition from the header to the content frame having a full width BG bar behind the navigation like it does by default only when it is left-aligned. 🙂

Thanks again for your help! My friend is very excited to be able to continue writing gaming articles for the site.

-Thomas
SkyeWelse