The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design What makes the navigation expand and colapse on resizing the browser?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #247834

    Im completely new to css and just started trying to learn it

    I have a wordpress demo site here:

    Can someone guide me into why/how the the menu bar collapses when the browser width is narrowed? (ie as it looks on a mobile)
    and the navigation expands when the browser is widened?

    can you point me to the css or code on this page that controls the colapse and expansion of the nav bar please?

    thanks in advance


    The CSS takes a “mobile first” approach in this template, meaning that the default styles make the layout look nice at the skinniest, linear proportions. Your default menu style is therefore the mobile version/layout.

    The thing that allows it it change is a media query. They’re in this file A media query is like a filter for various conditions (most commonly screen width). In this case there is a min-width of 600px, so when the screen is 600px wide or bigger, conditions are met for the filter, and other styles are allowed to come in to play to override those defined previously at smaller/default sizes. There may or may not be JavaScript involved too but I can’t check as I’m on mobile. The media query equivalent in JavaScript is matchMedia().

    As you’re new to CSS, you should probably research “mobile first” and “media queries” to help you get started.

    You should also look into using the developer toolbar – F12 in most browsers. You can use it to explore the DOM, check which styles are applied to each element, see which stylesheet they’re located in, and make live CSS edits in the browsers. It will be your bread and butter for troubleshooting.


    Great, thanks for your reply Beverleyh


Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design’ is closed to new topics and replies.