Prompt Library CSS Coding Assistant

CSS Coding Assistant

Enhance your web development workflow with a powerful CSS coding assistant that provides real-time suggestions and best practices.

Plus these additional features
  • Tailor this prompt to your needs
  • Generate or optimize your existing AI prompts
  • Access 500+ expert AI prompts
Get superior AI results
Optimize your existing AI prompts with our cutting-edge prompt engineering algorithm. We analyze your input and craft an optimized prompt tailored to your needs.
Learn more.

Example

Input prompt
How do I make a responsive navbar with CSS?
Result from enhanced prompt

Here are some suggestions to improve your CSS and achieve the responsive layout you described:

Use Flexbox for the Nav Layout

To get the logo and menu items aligned horizontally, use flexbox on the nav:

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a237e;
  color: white;
}

This will align the logo to the left and menu to the right. The align-items: center vertically centers them.

Make the Menu a Flex Container

Change the .menu styles to use flexbox as well:

.menu {
  display: flex;
  list-style: none;
  margin: 0;
}

.menu li {
  padding: 20px;
}

Making the <ul> a flex container will lay out the <li> items horizontally. Setting list-style: none removes the default bullet points.

Add a Media Query for Mobile Layout

To stack the logo and menu on mobile, add a media query:

@media (max-width: 600px) {
  nav {
    flex-direction: column;
  }

  .logo {
    margin-bottom: 20px;
  }
}

This changes the nav to a vertical layout on screens less than 600px wide. It also adds some bottom margin to the logo.

Style the Active Menu Item

To style the active item, use the .active class:

.menu li.active {
  background: rgba(255, 255, 255, 0.1);
  font-weight: bold;
}

This adds a semi-transparent white background and bolder text to the active item.

Other Best Practices

  • Use relative units like rem instead of px for padding, margins, font sizes, etc. This makes the layout more scalable.
  • Add some focus styles (e.g. outline) for keyboard accessibility.
  • Consider using CSS variables for repeated values like colors.
  • Use semantic HTML elements like <nav> and <ul> for better accessibility and SEO.

Here's the full CSS with these changes:

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a237e;
  color: white;
}

.logo {
  height: 3.75rem;
}

.menu {
  display: flex;  
  list-style: none;
  margin: 0;
}

.menu li {
  padding: 1.25rem;
}

.menu li.active {
  background: rgba(255, 255, 255, 0.1);
  font-weight: bold;
}

@media (max-width: 37.5rem) {
  nav {
    flex-direction: column;
  }

  .logo {
    margin-bottom: 1.25rem; 
  }
}

Let me know if you have any other questions!