[Resolved] Layout like twenty fifteen with menu on left

Home Forums Support [Resolved] Layout like twenty fifteen with menu on left

Home Forums Support Layout like twenty fifteen with menu on left

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1522920
    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

    #1522927
    Leo
    Staff
    Customer Support

    Hi there,

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

    Let me know if this helps ๐Ÿ™‚

    #1522945
    Mike

    Ha, u’re magic mate!

    I’ll try it and come back with feedback. Thanks! ๐Ÿ™‚

    #1523009
    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!

    #1523012
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1523020
    Mike

    Hi Elvin,

    Sure, please find below the credentials.

    Thank you very much!

    Mike

    #1523074
    Elvin
    Staff
    Customer Support
    /* 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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1523459
    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

    #1524376
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1524918
    Mike

    Thank you so much!

    I will close the ticket as solved!

    10 stars review

    #1525811
    Elvin
    Staff
    Customer Support

    No problem. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1884522
    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 ๐Ÿ™‚

    #1884626
    David
    Staff
    Customer Support

    Hi there,

    i doubt much will have changed since last year _ so Yes ๐Ÿ™‚

    #1884633
    Damiaan van Vliet

    Thanks David!

    #1884720
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.