Reducing the size of my icons up in the left and position the search icon on the left of Sök item

HTML & CSS
1

Hello, dear sitepoint community

I would like to reduce the size of the icons since they look big compared to the first navbar.
Also, the search icon is positioned wrongly, so I need to move it to the left of the content “Sök” If you click on the link at the bottom you’ll see the style that is preferred:

https://www.leksandsif.se/p/

Thank you in advance

2

Which icons are you referring to?

2 Likes
4

Sorry! I missed including the current project.

7

Setting a max-height on the icons would stop them getting too big as shown in the first demo you linked to. If you use your devtools you can see all the styles applied to those elements. However that example you are copying is badly coded with non semantic html and empty divs as spacers when none are needed.

I would code the top bar section in a more structured and simpler method like this.

Note that the nav element really only refers to main navigation and not general links so use it sparingly. It’s supposed to identify main areas of navigation within the site.

Your second topbar is completely corrupt and the html mismatched in many places. Note that interactive elements like links and buttons cannot be nested within one and another. They are mutually exclusive. For example it would be nonsense to nest two links as the browser would have no idea where to go, The same applies to buttons and inputs and some other interactive elements.

I’m guessing the html for your main nav should be something like this:

  <nav class="navbar-second flex">
    <div class="navbar__container">
      <div class="logo">
        <a href="#"><img src="https://www.leksandsif.se/p/_nuxt/img/lif@2x.88adf7d.png"> </a>
      </div>
      <div class="navbar__toggle" id="mobile-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
      <ul class="navbar__menu flex">
        <li class="navbar__item">
          <a href="#shop" class="navbar__links" id="shop-page">Shop</a>
        </li>
        <li class="navbar__item">
          <a href="#biljetter" class="navbar__links" id="biljetter-page">Biljetter</a>
        </li>
        <li class="navbar__item">
          <a href="#ett leksands if" class="navbar__links" id="ett leksands if-page">Ett Leksands If</a>
        </li>
        <li class="navbar__item">
          <a href="#mer" class="navbar__links" id="mer-page">Mer</a>
        </li>
        <li>
          <button class="cta">
            <i class="fa-solid fa-magnifying-glass"></i> Sök </button>
        </li>
      </ul>
    </div>
  </nav>

However I would advise that you fix the top bar first before moving on to the next thing.

8

You have squashed it so much that it has no room to align side by side. You’d need to do something like this but as mentioned that section needs revising as you are fighting yourself too much.

.navbar__menu{
  flex:1 0 0;/* make it stretch*/
}
.cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*padding: 30px 100%; really!!!*/
  padding:10px;
  margin-left:auto;/* will push it to the right*/
}

Remember that children of a flexbox are only content width unless you do something to them. This even includes when the flex-item is itself a flexbox and to make it fill available space you need something like this. flex:1 0 0;/* make it stretch*/

That’s why you need to practice on simple ‘bare bones’ layouts to work out how flex works in different situations. It’s easier to see when you have less code in the way and then you get that ‘ahaa’ moment :slight_smile:

Here’s a start anyway.

9

A post was split to a new topic: Aligning icons in a drop-down menu

10