Change nav menu's responsive width CSS – Veni Theme

  • iambrettzeck · Member ·

    On my website, I wish to change the CSS responsiveness which affects which navigation menu style is shown at a given browser width for desktops.

    Currently, the max-width is 1190px. When the browser is wider, the .compact-navigation menu in the site header appears and to the right a .sidemenu hamburger with social buttons below. When below 1190px, the header nav menu disappears and all is left is a hamburger menu and search icon. I want to decrease that max-width to something more toward 800px. I want to keep the menus how they are at every stage, but the @media screen responsiveness should be lowered in size.

    When I attempt to change the CSS myself, it seems these two menus are interconnected at several points and a few things need to be adjusted. I’m a novice at this and would appreciate direction, or hopefully a full answer. If I can explain this any differently, please ask.

    The blog I need help with is: (visible only to logged in users)

  • staff-mckluskey · Staff ·

    Hi there!

    The change you’d like to do is a little tricky and I’m afraid we can help you only partially.

    This code will make the hamburger menu appear at all screens narrower than 800px, however, you’ll notice that it will also move over the logo so you might actually change the number to something around 960px or so.

    @media only screen and (max-width: 1190px) {
.site-header nav.main-navigation div[class$=-container], 
.site-header nav.main-navigation #primary-menu {
    display: block;
}
.site-header .menu-toggle,
.site-header .search-button {
    display: none;
}
}

@media only screen and (max-width: 800px) {
.site-header nav.main-navigation #primary-menu {
    display: none;
}
.site-header .menu-toggle {
    display: block;
}
}

    I hope that helps :)

  • iambrettzeck · Member ·

    Fantastic! That is what I wanted. :) Thank you for this.

    It works and I changed the width to 960px. Great suggestion.

    Would it be possible for the sidebar menu which activates above a 1190px width to appear on a smaller screen, perhaps around 1000px? Or is this the part you were unable to help on?

    I’ll take what I can get! You rock.

  • staff-zinnia · Staff ·

    The scope of the second part is a bit beyond what we can support here. Feel free to contact Upwork though and hire someone to help you further.

    https://en.support.wordpress.com/upwork/

    Things are going to get very tricky with this amount of customization. You will probably be better off getting help with building a child theme.

  • The topic ‘Change nav menu's responsive width CSS – Veni Theme’ is closed to new replies.