[Resolved] Layout like twenty fifteen with menu on left

[Mike]

Hi guys,

I’ve tried to accomplish the menu on the left thing but I couldn’t find an option integrated in theme. Is there any way?

I’ve also searched for similar topics and found this one https://generatepress.com/forums/topic/layout-like-twentyfifteen-with-second-menu/, which provides an workaround, but I’ve also seen Tom said “The sidebar header layout is something I want to add to the theme.”

Is this feature added?

I want a really simple layout, only with the menu on left side and posts feed in right, exactly like in twenty fifteen theme.

Kind regards,
Mike

[Leo]

Hi there,

Take a look at this:
https://docs.generatepress.com/article/header-examples/#example-7

Let me know if this helps 🙂

[Mike]

Ha, u’re magic mate!

I’ll try it and come back with feedback. Thanks! 🙂

[Mike]

It worked.

One more question. Is there any way to put the search field right under the logo?
(between logo and nav menu, on top of nav menu)

Thank you for your help!

[Elvin]

Hi,

Any chance you can link us to the site in question? So we could check for the proper css.

You can add the site details on the Private Information text field. Thanks! 🙂

If you’re using flexbox, we should be able to play around with it and change the display order using CSS order:xx property.

[Mike]

Hi Elvin,

Sure, please find below the credentials.

Thank you very much!

Mike

[Elvin]

/* put search in-between logo and menu */
.header-widget {
    order: 1;
}
/* Reduce bottom margin, add top margin */
.header-widget aside#search-4 {
    margin: 20px 0 20px 0;
}

[Mike]

Elvin, you are amazing.

It works properly.

This is the last thing for today, I promise 😀

I noted down some mini tasks and I did most of them by myself, but I’m afraid not to ruin anything in other parts.
Because you know how it is in development, you fix something here, it breaks elsewhere -_-‘

The minitasks for header:
1) menu should have the width of parent (same width as search widget) (did it)
2) text of menu items to be left aligned (did it)
3) align dropdown arrow (.dropdown-menu-toggle) to right (didn’t manage to do it)
4) dropdown menu to remain (not hover) (didn’t manage to do it)

Could you please help me with your expertise over this code I’ve written for #1 and #2? It doesn’t look good to me and I worry it can impact other features/structures. (afraid not to break anything elsewhere)

This is the code:
.main-navigation, .main-nav {
width: 100%;
}
.main-nav {;
width: 100%
}

.main-nav .menu-item {
width: 100%;
border-bottom-style:groove;
border-width:0.1px;
}

.main-navigation .main-nav ul li a {
padding-left: 1px;
padding-right: 20px;
line-height: 40px;
}

Afterwards, we can share this header style to everybody, maybe there are fellows who find it useful. 🙂

Hope you have an amazing Monday,
Mike

[Elvin]

3) align dropdown arrow (.dropdown-menu-toggle) to right (didn’t manage to do it)

Add this css:
.menu-item-has-children .dropdown-menu-toggle {
float: right;
}

4) dropdown menu to remain (not hover) (didn’t manage to do it)

Read this documentation.
https://docs.generatepress.com/article/navigation-dropdown/

Could you please help me with your expertise over this code I’ve written for #1 and #2? It doesn’t look good to me and I worry it can impact other features/structures. (afraid not to break anything elsewhere)

The code seems fine. But as an advice, be uniform and more specific about it if you can.

Example: .main-nav .menu-item and .main-nav ul li are literally the same thing. Pick a uniform way of writing it so you don’t get confused in the future when you have to go back to this.

Btw, in cases where say, there are grand child of the same element like .main-nav ul li ul li, if you want the CSS to apply only on the parent, you’ll have to use > as in .main-nav ul > li or .main-nav ul > li.menu-item.

[Mike]

Thank you so much!

I will close the ticket as solved!

10 stars review

[Elvin]

No problem. 🙂

[Damiaan van Vliet]

Hi team, is above mentioned still the best option to have a layout like Twenty Fifteen with GP? When yes, that’s what I will do 🙂

[David]

Hi there,

i doubt much will have changed since last year _ so Yes 🙂

[Damiaan van Vliet]

Thanks David!

[David]

You’re welcome

[Author]

Posts