[ANSWERED] html – nav logo proper link href

Question 1

To do this, you should break the <a href="#" class="logo-block-link"><img src="logo.png" alt="" class="logo"></a> and <a href="#"><h3 class="logo-tittle">Company</h3></a> into 2 div. Then, use float: left to make the 2 div in one row. After that, place the flex: 1 to parent of the 2 div. You will be able to use href working when you click on the logo or the name.

For more detail, see below sample code:

<html lang="en"><head>
        <link rel="stylesheet" href="style.css">
		<style>
		*{
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		list-style: none;
		text-decoration: none;
	}

	nav{
		background-color: salmon;
	}

	.container{
		padding: 15px 0;
		background-color: #fdcb9e;
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1140px;
		margin: 0 auto;
	}

	.logo-block{
		border:1px solid gold;
	}

	.logo-block-link{
		display: flex;
		border:1px solid black;
	}

	.logo{
		width: 50px;
		height: 50px;
	}

	.nav-list{
		flex:1;
		display: flex;
		justify-content: space-between;
	}

	.logo-tittle{
		font-size:20px;
		color:#3f3f44;
		text-transform: uppercase;
		letter-spacing: 2px;
		font-family: monospace;
		margin-left: 10px;
	}

	.nav-list li a{
		font-size:16px;
		color:#3f3f44;
		font-family: monospace;
	}
		</style>
    </head>
    <body>
        <nav>
            <div class="container">
                <div style="flex: 1;">
                    <div class="logo-block" style="float: left;">
                        <a href="#" class="logo-block-link">
                            <img src="https://www.gravatar.com/avatar/7d821e531f911facf0f644c1e708dd99?s=32&d=identicon&r=PG" alt="" class="logo">
                        </a>
                    </div>
                    <div style="float: left;">
                        <a href="#">
                          <h3 class="logo-tittle">Company</h3>
                        </a>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <ul class="nav-list">
                    <li><a href="">About</a></li>
                    <li><a href="">Projects</a></li>
                    <li><a href="">Team</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        </nav>
    </body>
</html>

Question 2

” I want that href only works when I hover logo or name not whole box ”
I recomend you do it in JS, for example you can activate link by adding attribute href with value. So for example:

 <a>This is link </a>

You add attribute href=’yourlink’ by js and you get <a href='yourlink'>This is link </a> and it should works.

So in javaScript:

Aelement.setAttribute('href','yourlink');

Question 3

I am learning how to create header and I have problem with proper link href. My logo-box wraps image(logo) and name of the company but in order to align them with display flex it covers full width. I want that href only works when I hover logo or name not whole box. I don’t know how to solve this problem.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <div class="container">
                <div class="logo-block">
                    <a href="" class="logo-block-link">
                        <img src="logo.png" alt="" class="logo">
                        <h3 class="logo-tittle">Company</h3>
                    </a>
                </div>
                <ul class="nav-list">
                    <li><a href="">About</a></li>
                    <li><a href="">Projects</a></li>
                    <li><a href="">Team</a></li>
                    <li><a href="">Contact</a></li>
                </ul>

            </div>
        </nav>
    </body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

nav{
    background-color: salmon;
}

.container{
    padding: 15px 0;
    background-color: #fdcb9e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1140px;
    margin: 0 auto;
}

.logo-block{
    flex:1;
    border:1px solid gold;
}

.logo-block-link{
    display: flex;
    border:1px solid black;
}

.logo{
    width: 50px;
    height: 50px;
}

.nav-list{
    flex:1;
    display: flex;
    justify-content: space-between;
}

.logo-tittle{
    font-size:20px;
    color:#3f3f44;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: monospace;
    margin-left: 10px;
}

.nav-list li a{
    font-size:16px;
    color:#3f3f44;
    font-family: monospace;
}

Bollate

[ANSWERED] html – nav logo proper link href

By

Solution 1 :

Solution 2 :

Problem :

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate