Achieving inline navigation with hover effects

Could someone help me with creating a HTML Navbar that displays inline and has a hover effect?

This is the HTML code I have been working on:

<nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
<div class="container-fluid d-inline-block" >
  <a class="navbar-brand" href="#">
    <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
    NEW
  </a>
  <a class="navbar-brand" href="#">
    <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
    COPY
  </a>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

If you're looking for a quick bootstrap solution, consider using the navbar-link class. You can find more information in the documentation

<nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
<div class="container-fluid d-inline-block" >
  <a class="navbar-link" href="#">
    <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
    NEW
  </a>
  <a class="navbar-link" href="#">
    <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
    COPY
  </a>
  </div>
</nav>

Answer №2

To implement a hover animation, you can utilize a CSS file:

HTML :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>

    <nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
        <div class="container-fluid d-inline-block" >
            <a class="navbar-brand" href="#">
                <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
                NEW
            </a>
            <a class="navbar-brand" href="#">
                <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
                COPY
            </a>
        </div>
    </nav>

</body>
</html>

CSS:

.navbar-brand:hover {
    background-color: blue;
}

.d-inline-block {
    display: inline-block;
}

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

Is there a method to obtain the compiled CSS for an Angular 2+ component?

Is it possible to retrieve compiled CSS (as a string) from an Angular2+ component? @Component({ selector: 'test-graph', templateUrl: './test-graph.component.html', styleUrls: ['./test-graph.component.scss'] }) export cla ...

cssangular

Tips for switching the background image in React while a page is loading?

Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...

javascripthtmlcssreactjs

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Here are my HTML code segments: <div class="div-builder"> <div> <a href="#"> <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo"> </a> <h3>Title</h3> < ...

jqueryhtmlcsshoverclick

Creating a dynamic dropdown menu using PHP and HTML

Here is an example of html snippet for a dropdown menu: <form name="navList" onsubmit="return submitForm();"> <select name="subMenu"> <option value> </option> <option value> CR_ID </option> <option value> CR_HEADL ...

html

`How can I find a file in Magento that contains a specific class name?`

I'm fairly new to Magento and could use some assistance with finding a specific file/template in the Magento directory. I am trying to locate the template that contains the code for the "Featured Category" section on the homepage of . I need to make s ...

htmlmagentotemplatesthemesroot

Spin and shift image of a ball using Html 5

Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10. Here is the script I am using: var ball = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas&apos ...

htmlcssanimation

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

I am seeking assistance on how to insert a button on each element of a Listview (PHP/Json) result. When clicked, this button should open a modal window where the customer can input reservation details such as Date, Adults, and Children. Below is the JavaSc ...

javascriptjqueryhtmlkendo-ui

What could be causing the issue with my php login page not functioning properly?

When I try to log in, the system does not verify whether the user login is successful or not. Instead, it redirects me back to the login page after entering my username and password. Also, the header location function doesn't seem to be working proper ...

phphtml

Develop a JSON structure that represents an array of dynamically generated fields in PHP

Need help converting data from a PHP form into a specific JSON format. Struggling to create the right array that can be easily converted into JSON format. Here is a snippet of the array structure: Array ( [user_id] => [title2] = ...

phphtmljquerycssjson

Emphasize a div container within a content-editable field as though it were regular text

I currently have a unique JS Fiddle demonstrating a div with a background image inside a content editable input. My goal is to highlight the div as if it were regular text. .input { border: 1px solid black; width: 200px; } .emoji { width: 16px; ...

htmlcsscontenteditable

Tips for determining if a player (canvas) is in contact with a drawn wall for collision detection

I created a 2D map using the canvas HTML element where I drew a red square to represent the player and a light blue wall underneath it. I am looking for a way to detect if the player (red square) is in contact with the wall (light blue). The elements do no ...

javascripthtmlcanvas

Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right. I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within th ...

htmlcssvertical-alignmentnav

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

javascriptjqueryhtmlcss

Inheriting vertical height and alignment (inline-block)

I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation. 1 http://d.pr/i/6TgE+ why http://d.pr/i/UAZn+ *it's actually 9. Here is the code snippet: <header> <div class=" ...

htmlcss

Tips for including a hyperlink in a collapsible element within a dropdown menu using Bootstrap 5

Is there a way to add a link to "Home" and "Pages" that will collapse and show the list items below when clicked? I tried changing "#homeSubmenu" from a link to a href, but it does not collapse when clicked. <div class="wrapper"> & ...

cssdropdownbootstrap-5

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren

Display the footer once the user has reached the end of the page by scrolling

Below is the footer code I am working with. <div class="row"> <div class="col-md-12"> <div> this section always remains at the bottom </div> </div> <div class="col-md-12"> <div> only v ...

javascripthtmlcsstwitter-bootstrap

Ways to display the success value prior to the completion of AJAX jQuery from the PHP page

Here is the AJAX code I am using: $(".content").empty(); $.ajax({ type: 'POST', url: 'xyz.php', data: $('.chk:checked').serialize(), success: function(data) { $(".content").append(data); } }); M ...

phpjqueryhtmlajax

Handling CSS files on ASP.NET Pages

While ASP.NET can indeed be configured to handle any file type in various ways, most of us have other responsibilities to attend to, even on our days off. I'm currently intrigued by the idea of implementing an ASP.NET handling pipeline specifically fo ...

asp.netcss

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

htmlcss