Menu Close
In fact, it has the 39mm Oystersteel monobloc middle-case of the OP essentially, which appears a little more curvaceous than the flat, trapezoid profile of the 40mm Oystersteel Submariner. The bezel of the replica rolex watches Explorer I is different on each: The OP has a domed, high-polish bezel, while the Explorer I has what Rolex calls a "Smooth" bezel. It has a flat surface instead of the convex bezel of the OP, with nicely polished.

Responsive Navbar without Javascript

Responsive Navbar without Javascript

Greetings to all. Today I’ll demonstrate how to make a responsive navbar without Javascript that has a dropdown effect for mobile devices. The major CSS section will be explained, and the remaining code will be provided in the code pen at the end of this blog.

Let’s get started…

I’ll use the :has() selector for the toggle effect; you can see which browsers support it here.


  <div class="logo">
    <h1 class="logo-text">LOGO</h1>
    <button class="hamburger-icon">
      <label for="dropdown">
        <i class="fa-solid fa-bars"></i>
        <i class="fa-solid fa-x"></i>
      <input type="checkbox" id="dropdown" />
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
Enter fullscreen mode

Exit fullscreen mode

  • I’m putting a checkbox field inside the button to create a toggling effect. The bars and cross icons will likewise be toggled by this checkbox.


/* hiding the hamburger icon for the desktop view */

/* Hiding the checkbox default styling */
.hamburger-icon input[type="checkbox"] {
  appearance: none;
/* targeting the element for the 
viewport less than 600px*/
@media screen and (max-width: 600px) {
/* Hiding the nav links with height and overflow */
 .navigation {
    flex-direction: column;
    align-items: center;
    transition:all 0.5s ease-in-out;

/* It will put the Logo text at left end 
and Hamburger at the right end of the header */
.logo {
    display: flex;
    justify-content: space-between;

/* Making the hamburger button visible */
.hamburger-icon {
    display: block;

/* Initially hiding the cross icon */

/*determining whether the header contains a checkbox input that is checked before expanding the navigation's height to 100 pixels to make it visible.*/
  header:has(.hamburger-icon input[type="checkbox"]:checked) .navigation {
    margin-top: 1rem;

/* Hiding the bars icon on checkbox checked state */
  header:has(.hamburger-icon input[type="checkbox"]:checked) .fa-bars {

/* Showing the cross icon on checkbox checked state */
  header:has(.hamburger-icon input[type="checkbox"]:checked) .fa-x {
Enter fullscreen mode

Exit fullscreen mode

Codepen –

You can contact me on –
Instagram –
LinkedIn –
Email –

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ –> <–

Also check these posts as well

View Source