User1980's avatar

Tailwind breaking point issue with navbar

Hi all,

I am still new to Tailwind 3 and cannot figure out how the breaking points can be manipulated for a nav bar.

Let's say I have a nav like this:

<div class="main">
<div class="div1">
Home | Link 1 | Link 2 | Link 3 | Link 4
</div>  
<div class="div2">
[button1] [button2]
</div>
</div>

When my page resizes, the buttons on the right side clash with Link 3 and link 4.

How would you set the Hidden property on the div1 to hidden only after xxx page width?

Thanks

0 likes
5 replies
User1980's avatar

@Braunson Unfortunately I cannot because the terms and conditions of tailwindUI will not allow me to share their code publically. Sorry.

MohamedTammam's avatar
MohamedTammam
4 years ago
Best Answer
Level 51

If you want to use md breakpoint for example you would do it like that.

<div class="main">
<div class="div1 none md:block">
Home | Link 1 | Link 2 | Link 3 | Link 4
</div>  
<div class="div2">
[button1] [button2]
</div>
</div>

if you use a breakpoint property, it will take effect from that breakpoint and above.

User1980's avatar

@MohamedTammam Thanks, very good. For based on this page: https://tailwindcss.com/docs/screens

If I wanted to create a new breaking point I will do it like this if I am correct:

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'new': '864px',
      // => @media (min-width: 864px) { ... }   <<<-------

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

<div class="main">
<div class="div1 none new:block">
Home | Link 1 | Link 2 | Link 3 | Link 4
</div>  
<div class="div2">
[button1] [button2]
</div>
</div>

Please or to participate in this conversation.