Move main navigation to sidebar, have it at the top in narrower widths

  • Resolved fluffyrr

    (@fluffyrr)


    10 years, 6 months ago

    Hi there

    Thanks for the brilliant theme and all its supporting documentation – really useful for a n00b like me.

    I am trying to create a child theme in which the main navigation is in the (left, single) sidebar. It is entirely flat, nothing complicated at all.

    If I remove the nav php from header php the main nav is removed from the top. The custom menu widget can insert the links into the sidebar.

    BUT! when scaling down to narrower browser widths this menu drops to the bottom of the screen. Is there a way of defining it as the main navigation to ensure it appears at the top with the menu icon etc etc?

    [also I can’t get the background color of the left sidebar to extend to match the height of the content pane but this is probably such a stupid thing to be unable to manage that I won’t mention it]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Tomas Mackevicius

    (@tomasm)

    To achieve what you want, I think the easiest method would be a mixed one ??

    You will maintain two menus top and sidebar – having them the same, but:

    in the main CSS part you will hide the side menu widget (hides it in mobile view, but you will have top menu)

    and in the media queries you will insert CSS rules to show side widget an rules to hide top menu (you will have sidebar menu).

    for hiding you can use display: none, for showing again: display: block.

    just an update on this as i was trying to do something similar. from the top request it looks like Tomas i think you wrote the steps backwards as he wanted to hide to top menu when using wider widths. (thats how i read it anyway and was what I was trying to accomplish)

    so i added the below within this tag

    @media screen and (min-width: 770px) {

/* display sidebar widget menu  */
.menu {
display: block;
}

/* remove top menu bar for larger widths */
.main-navigation {
display: none;
}

    and added this to the higher up after this rule

    /* Small (mobile) menu */
.site-header .menu-toggle {
}

/* remove sidebar menu from mobile site */
.menu {
display: none;
}

    Theme Author Tomas Mackevicius

    (@tomasm)

    Thanks for your input!

    Also please share your sites, we’re all awaiting new theme implementation examples ??

    Tomas

    thanks and thanks for your theme, it is still in development so no link yet. Also any eta on the new version tiny framework? very interested in it before I get too far on this if its close?

    Theme Author Tomas Mackevicius

    (@tomasm)

    I submitted new theme version to WP.org for review, please read here:

    https://mtomas.com/551/working-hard-on-accessible-theme-tiny-framework#comments

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Move main navigation to sidebar, have it at the top in narrower widths’ is closed to new replies.