Skip to content
OverviewSolutions
4
Comments
27

Ren Ras

@renrasPhilippines420 points

self-taught web developer

Latest solutions

Latest comments

  • Ren Ras•420
    @renras

    I usually break the page down into components when the code gets too long as it's easier for me to manage. Usually my jsx has like a maximum 100 lines of code. But only the ui elements and others that will be re-used will be stored in the components folder. The other page components I just store it in a page folder like pages/home so that you wouldn't have to deal with a lot of unnecessary components in the components folder

    Marked as helpful
  • Ren Ras•420
    @renras

    I was able to recreate what you were trying to do in this codepen: https://codepen.io/renras/pen/bGaZPJx,

    Or you could just put them in a parent container and do display: flex instead of using the ::after approach.

    Marked as helpful
  • Ren Ras•420
    @renras
    • avoid setting fixed width for containers
    • try to use max-width, min-width and percentages instead
    • try to make your flexbox and grid layouts responsive like :
    .flex {
  display: flex;
  flex-wrap: wrap;

   .flex-children {
     flex: 1 1 0;
   } 
 }

 .grid {
  grid-template-columns: repeat(4, auto);
 }
    Marked as helpful
  • Ren Ras•420
    @renras

    Try wrapping your nav inside a div and apply the positioning on that instead and add overflow: hidden on the nav;

    <main style={{position: relative}}>
 <div style={{position: absolute}}>
  <nav style={{overflow: hidden}}></nav>
 </div>
</main>

    I successfully recreated the animation you're trying implement here in this codepen: https://codepen.io/renras/pen/XWVooXg

  • Ren Ras•420
    @renras

    You can make a separate nav for mobile and desktop and make use of display: none. This will reduce complexities in your layout. Otherwise, make your transition more specific by targeting only the property you want animated.

  • Ren Ras•420
    @renras

    You can put your icons in a container like a button and put a hover effect on that container instead. It's also fine if icons don't have a hover effect, most sites are like that.

    Regarding your question about the the menu, the easy way would be making a triangular div and place it above your menu. Here's a useful link: https://css-tricks.com/snippets/css/css-triangle/

    I believe you can also make use of clip-path. It's more complex than the first option but actually worth learning as it provides more flexibility and is often used in complex layouts.https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

    Marked as helpful
View more comments