Navigation logo with correct linking URL

Struggling with creating a header and having trouble with proper link href placement. The logo-box I'm working on contains the company's logo image and name, but when using display flex to align them, it covers the full width of the box. I'm looking to have the href only activate when hovering over the logo or name, not the entire box. Any suggestions on how to resolve this issue?

<!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;
}

Answer №1

To achieve this, you can split 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 two separate div elements. Then, apply the float: left property to align the two div elements next to each other in a row. Lastly, add flex: 1 to the parent container of the two div elements to ensure that the href links work properly when clicking on either the logo or the company name.

For a more detailed example, refer to the sample code below:

<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>

Answer №2

"I am looking to make the href attribute only function when hovering over the logo or name, not the entire box." My suggestion would be to use JavaScript to achieve this. For example, you can activate the link by adding the href attribute with a value. Here's an example:

<a>This is a link</a>

You can add the href='yourlink' attribute using JavaScript and you will get

<a href='yourlink'>This is a link</a>
which should work as intended.

Here is how you can do it in JavaScript:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing the OnChange event of the "Select" feature in Delphi with WebBrowser

In my Delphi project, I am using the WebBrowser component to navigate a HTML page that contains a ComboBox. Is there a way to trigger the OnChange event of the ComboBox? Here is how the ComboBox is structured: <select name="comboname" onchange="Some J ...

Personalizing Twitter Bootstrap Directly from the Bootstrap Source Directory

As I work on developing a responsive web application using Twitter Bootstrap, my goal is to customize the Bootstrap framework to fit my specific needs. To do so, I have downloaded the Bootstrap source files from getbootstrap.com. My plan is to customize B ...

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

Moves are chosen to move downward when positioned next to an inline-block level element

Check out this jsfiddle example How can I prevent selects from moving down when there is an inline-block level element next to it? <select> <option value="" >Day</option> </select><select> <option value="" >Mon ...

What is the best way to arrange elements above and below each other in a single flexbox container?

Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and fl ...

JavaScript and CSS animations offer dynamic and engaging ways to bring

I'm working on a div section and I want it to come down and rotate when a button is clicked. However, after moving to the bottom, it doesn't rotate as expected but instead returns to its initial position along the Y axis. How can I fix this issue ...

Is it possible to create a fading effect on an image using a border-radius of 50%?

Struggling with fading out an image that's circular in shape due to the border-radius: 50%. <section id="main"> <h1>Non-Important-Text</h1> <h4> it's all fun and games until you can't find a damn sol ...

What are the methods for accessing data from a local Json file on an html page without using a server?

Looking to access a local Json file from an HTML page, but encountering challenges in reading the file on Chrome and IE. Is there a method to achieve this without relying on a web server? ...

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

Submit Form using Ajax - Update text in HTML element upon click

As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...

What is the best way to customize a video in Bootstrap 5 so that it remains at the bottom of the screen with centrally aligned text

When using Bootstrap 5, I am facing a challenge with a video on the index page that plays beneath the navigation. I want to maintain the 16x9 aspect ratio and have centered text overlayed on the video. However, I encounter an issue when attempting to set a ...

Having trouble loading CSS and JavaScript files in CodeIgniter?

In my project, I am utilizing Bootstrap as a template. However, when attempting to access Bootstrap in Codeigniter, the page fails to load the CSS and JavaScript files. I have included the URL in autoload.php $autoload['helper'] = array('url ...

I'm facing an issue with grid-template-area not working properly, even though I've ensured that

My div elements are not aligning with the grid template areas specified in the CSS. When inspecting in Firefox, it shows as "zero one two three four", "five six ... etc." The classes mentioned apply to divs within the container div with a class of "spaces ...

Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...

Struggling to connect HTML elements with AngularJS and TinyMCE?

My objective is to edit text using tinymce, persist it in a database, and display it within a div by incorporating angularJS for the same styling and formatting. I am utilizing tinymce 3.5.8 with an angularUI directive. I have successfully saved the wysiw ...

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

Styling and Script Files on a JQuery Mobile Website

Is it necessary to include CSS and JS files in every HTML page for a mobile site developed with JQueryMobile? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jqu ...

Grid Property Equivalent to Flex-Grow

I stumbled upon a bug in the way Chrome version 75 handles flexbox. Therefore, I am curious to explore if the issue persists with grid, but for my test to be accurate, I need a grid property that functions similarly to flex-grow considering the current str ...

Issue encountered with jQuery nested hover events and the removeClass() function being triggered on mouseleave

I have a nested list structure that I am working with: <ul class="menu-wrapper"> <li> <a href="#">Menu item</a> <ul class="sub-menu"> <li> < ...

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...