[Resolved] James Clear header and navigation style

[Matteo]

Hi,

how can I change my header/navigation from this to this?

Thanks.

[David]

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    #primary-menu {
        flex: 1;
    }
    .main-navigation ul {
        display: flex;
    }
    .main-navigation li:first-child,
    .main-navigation li:last-child {
        margin-left: auto;
    }
    .main-navigation li:last-child {
        min-width: 210px;
        text-align: right;
    }
}

[Matteo]

Good result for the homepage.

The rest of the site is not ok.

This is my CSS Customizer, what’s wrong?

/* GeneratePress Site CSS */ /* Link underlines */
.entry-content a:not(.button) {
	box-shadow: inset 0 -1px 0 currentColor;
	transition: color 100ms ease-in,box-shadow .13s ease-in-out;
}

.entry-content a:not(.button):focus, .entry-content a:not(.button):hover {
	box-shadow: inset 0 0 0 currentColor,0 3px 0 currentColor;
}

/* Content selection */
::selection {
  color: white; 
  background: black;
}

/* Sub-menu effect */
.main-navigation ul ul {
	left: auto;
	transition: opacity 300ms ease-in-out, transform 200ms ease-in-out, height 200ms ease-in-out;
	transform: translateY(20px);
	height: auto;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 5px 0;
}

.main-navigation:not(.toggled) ul li:hover>ul, .main-navigation:not(.toggled) ul li.sfHover>ul {
	transform: translateY(0);
}

.slideout-navigation.do-overlay .slideout-menu .sub-menu li a {
	display: block;
}

/* Footer widget icons */
.footer-widget-1 {
	text-align: center;
}

.footer-icons a {
	padding: 5px;
	display: inline-block;
}

/* Center off canvas close button */
@media (max-width: 768px) {
	.slideout-navigation.do-overlay .slideout-exit {
		text-align: center;
	}
} /* End GeneratePress Site CSS */

.page-hero-content {
    padding: 20px;
    border: 5px solid rgba(211,211,35,0.2);
    border-radius: 10px;
    max-width: 700px;
}

@media (max-width: 1200px) {
    .page-hero-content {
         padding: 10px;
         margin: auto;
    }
}

.page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right;
}

@media (max-width: 768px) {
    .inside-page-hero {
        display: block;
    }
}

.generate-sections-inside-container:after {
    display: table;
    content: "";
    clear: both;
	}

.home.nav-aligned-center .navigation-branding {
    margin-right: auto;
}

.hero-columns {
    display: flex;
    align-items: center;
}

.hero-columns h1 {
    font-size: 30px;
    color: #000;
}

.hero-columns h2 {
    font-size: 30px;
    color: #000;
}

.hero-images {
    padding: 30px;
}

@media (max-width: 1000px) {
    .hero-images {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .hero-images {
        padding: 10px;
    }
}

.hero-images {
    align-self: flex-end;
}

.hero-images img {
    vertical-align: bottom;
}

.site-info {
display: none;
}

.wpsp-related-posts {
    background-color: #f2f3f4;
    padding: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-related-posts p {
    margin-bottom: 10px;
}

#breadcrumbs {
    font-size: 14px;
    padding-bottom: 0px;
}

.wp-show-posts article {
    display: list-item;
    margin-bottom: 0 !important;
}

body.page-id-1006 {
    background-color: #000;
}

body.page-id-1329 {
    background-color: #000;
}

@media(min-width: 769px) {
    #primary-menu {
        flex: 1;
    }
    .main-navigation ul {
        display: flex;
    }
    .main-navigation li:first-child,
    .main-navigation li:last-child {
        margin-left: auto;
    }
    .main-navigation li:last-child {
        min-width: 210px;
        text-align: right;
    }
}

[David]

Its because of this request you had in another topic:

https://generatepress.com/forums/topic/different-menu-layout-for-homepage/#post-1120165

If you want the same layout on all your site then you would:

1. remove the code provided in that topic.
2. in Customizer > Layout > Header – enable the Navigation as header option.

[Matteo]

Thank you very much, now it’s work.

One last question: how can I do to 1. have the logo moved a little bit to the right, more close to the centered menù? And 2. move ‘newsletter’ item a little bit to the left, more close to the centered menù?

[David]

Couple of options:

1, in Customizer > Layout > Primary Navigation you can set the Inner Width to Contained

OR

2. Add this CSS if you just want to move those elements inwards:

.inside-navigation {
    padding: 0 20px;
}

Change the 20px to what you need, and include that CSS in your @media query with the other CSS i provide so it is like this:

@media(min-width: 769px) {
    #primary-menu {
        flex: 1;
    }
    .main-navigation ul {
        display: flex;
    }
    .main-navigation li:first-child,
    .main-navigation li:last-child {
        margin-left: auto;
    }
    .main-navigation li:last-child {
        min-width: 210px;
        text-align: right;
    }
    .inside-navigation {
        padding: 0 20px;
    }
}

[Matteo]

Your code works but now the main menù is not centered anymore.

[David]

I just updated the CSS here:

https://generatepress.com/forums/topic/james-clear-header-and-navigation-style/#post-1779792

[Author]

Posts