How to do this really simple text adjustment in nav?

Hi All,

EDIT: question updated, ignore this OP and see my latest post please, help REALLY appreaciated

I am looking to add a logo to my nav bar and have it positioned correctly however the image stays the same as its original size, what is the best practice to get the img to be as big (height) as the nav bar and to rezise to fit?

Edit: also - when following this tutorial I am applying the hover to the a elements but when I hover its only giving a background color that surrounds the text, not the whole div or section if that makes sense?

HTML:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="flexbox.css">

<title>Document</title>
<div class="topNav">

    <img src="/euca.png"><a class="active" href="#">Home</a>

    <a href="#">Products</a>

    <a href="#">Contact</a>

    <a href="#">About</a>

</div>
This is my css:

.topNav {

background-color: lightgreen;

overflow: hidden;

}

.topNav a {

float: left;

color: grey;

margin: 20px;

text-decoration: none;

font-weight: bold;

font-size: 20px;

}

.topNav a:hover {

background-color: green;

}

.topNav img {

float: left;

max-width: 40px;

margin-right: 30px;

margin-left: 10px;

margin-top: 3px;

align-items: center;

}
Thanks!

Hello there @PAJM :wave:,

The best way to get a logo on a navbar is to use an SVG navbar. This will allow it to resize as small and as big as possible, because SVG can be infinitely rescaled.

Hope this helps,
Remember to Stay Safe and Happy Coding

Catalactics

2 Likes

Hi bud not sure if I can pick your brain a lil bit more? Nothing worse than running into a brick wall during a tutorial;

Edit: also - when following this tutorial I am applying the hover to the a elements but when I hover its only giving a background color that surrounds the text, not the whole div or section if that makes sense?

HTML:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="flexbox.css">

<title>Document</title>
<div class="topNav">

    <img src="/euca.png"><a class="active" href="#">Home</a>

    <a href="#">Products</a>

    <a href="#">Contact</a>

    <a href="#">About</a>

</div>

This is my css:

.topNav {

background-color: lightgreen;

overflow: hidden;

}

.topNav a {

float: left;

color: grey;

margin: 20px;

text-decoration: none;

font-weight: bold;

font-size: 20px;

}

.topNav a:hover {

background-color: green;

}

.topNav img {

float: left;

max-width: 40px;

margin-right: 30px;

margin-left: 10px;

margin-top: 3px;

align-items: center;

}
Thanks!

Hey @PAJM,

I don’t really get what you’re going with, because all of you’re <a> tags are inside a div. Do you want the whole div to change background when you hover on only one of the tags?

I figured that one out, but i’ve a bit more of a simpler issue now. Trying to get the text to display vertically in the center of the nav bar, here is an image and my code:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="flexbox.css">

<title>Document</title>
<div class="topNav">

    <img src="/euca.png">

    <h1 class="company">KOALA Eucalyptus</h1>

    <a class="active" href="#">Home</a>

    <a href="#">Products</a>

    <a href="#">Contact</a>

    <a href="#">About</a>

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">

        <i class="fa fa-bars"></i>

    </a>

</div>

<div class="topImgs">

    <img src="https://mindbodygreen-res.cloudinary.com/images/w_767,q_auto:eco,f_auto,fl_lossy/org/k2e7tz7t2jrgvyn9g/side-view-of-eucalyptus-essential-oil-droppers-with-a-fresh-eucalyptus-branch.jpg"

        alt="eucalyptus ad">

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRJE7mAlIMM0fG_AeBxsEOPqLGxHd-2cs137g&usqp=CAU"

        alt="eucalyptus ad">

</div>

.topNav {

background-color: lightgreen;

overflow: hidden;

display: flex;

}

.topNav a {

position: relative;

display: inline-block;

color: grey;

text-decoration: none;

font-weight: bold;

font-size: 20px;

padding: 14px 16px;

margin-left: 40px;

text-align: center;

align-items: center;

}

.topNav a:hover {

background-color: green;

}

.topNav a.active {

background-color: #ffffff;

color: black;

}

.topNav img {

float: left;

max-width: 40px;

margin-right: 30px;

margin-left: 10px;

margin-top: 3px;

align-items: center;

}

.topImgs {

max-height: 30px;

}

body {

background-color: rgb(107, 107, 107);

}

.company {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

font-size: 25px;

text-align: center;

}

I know I can add top: 5px; say to my navBar.a elements but as shown below it creates a gap and green line above?