Currently, I am working on a web page and adding a navigation bar with some menu items. When hovering over the menu items, I want to display a border around them. However, I have noticed that when they are hovered over, it not only adds a border but also affects the text. How can I remove this effect from the text?
To address this issue, I propose changing the border color to transparent while maintaining the same width as when the element is hovered.
body {
font-family: "Montserrat", sans-serif;
}
* {
margin: auto;
padding: 0px;
}
.header {
background-color: #0d1422;
color: white;
width: 100%;
height: auto;
padding: 10px;
overflow: hidden;
}
.header .logo {
width: auto;
margin: 37px 100px;
color: white;
font-size: 50px;
font-weight: 800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #f5a425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight: 600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
border: 1px solid transparent;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover {
border: 1px solid #f5a523;
transition: 0.5s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grad school project</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1><span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about-us</a></li>
<li><a href="#">courses</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">extarnal</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>I've made some updates to the original items by adding a transparent border and changing the color on hover. Additionally, I've adjusted the transition to the not hovered selector for better functionality.
body {
font-family: 'Montserrat', sans-serif;
}
* {
margin: auto;
padding: 0px;
}
.header {
background-color: #0d1422;
color: white;
width: 100%;
height: auto;
padding: 10px;
overflow: hidden;
}
.header .logo {
width: auto;
margin: 37px 100px;
color: white;
font-size: 50px;
font-weight: 800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #f5a425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight: 600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
transition: 0.5s;
border: 1px solid transparent;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover {
border: 1px solid #f5a523;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grad school project</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1><span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about-us</a></li>
<li><a href="#">courses</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">extarnal</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>I'm a bit uncertain about your intentions, but it seems like you want a border to appear when hovering over the items without causing any jumping around. To achieve this, consider adding a display:flex property to your menu-bar items with a flex-direction of column to maintain their order.
body{
font-family: 'Montserrat', sans-serif;
}
*{
margin:auto;
padding:0px;
}
.header{
background-color:#0D1422;
color:white;
width:100%;
height:auto;
padding:10px;
overflow:hidden;
}
.header .logo{
width: auto;
margin: 37px 100px;
color:white;
font-size:50px;
font-weight:800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #F5A425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
display:flex;
flex-direction:column;
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight:600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover{
border:1px solid #f5a523;
transition:.5s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grad school project</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1> <span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li> <a href="#">home</a></li>
<li> <a href="#">about-us</a></li>
<li> <a href="#">courses</a></li>
<li> <a href="#">contact</a></li>
<li> <a href="#">extarnal</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>This issue is new to me. I am facing difficulty modifying the width in my media query. Interestingly, in the developer tools, the width appears crossed out, as if I toggled it off, but that's not the case; it's the default setting. All I want to ...
Currently working on a website, and the top section has a small column on the right with an image taking up the majority of the space to the left. The problem arises when the image spills over the screen size, messing up the overall layout of the page. I d ...
When creating websites, I utilize bootstrap to build everything from the ground up. Currently, I have a question concerning containers and positioning. In an upcoming project, I plan on designing a section where a container overlaps the header image (see ...
Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...
I am struggling to make my button display the same in Chrome as it does in Mozilla Firefox. Here is the CSS code I am using: .myButton { font-size: 14px; background:#e3e3e3; color:gray; padding:11px; margin-right: 0; width: 1 ...
The text in my input is initially filled with this string "foo foo"<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2920200f29202061263b">[email protected]</a>>. However, after an insert, the string now l ...
I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...
I am working on an html page that receives a callback from a social service. Once the callback is implemented, I need to extract data from the url. Does anyone have suggestions on how to retrieve this data after the callback has been successfully impleme ...
Today, I've been tackling the challenge of creating an HTML contact form that can send an email using Node.js and Gulp. However, I'm struggling to find a solution. Using a relative path to a simple .PHP file doesn't seem to be working, so it ...
In my quest to automatically number headings with multiple levels of hierarchy in an HTML document using CSS, I have encountered various examples online that heavily rely on counter-reset. However, despite testing it in different configurations, I haven&ap ...
Is it possible to adjust the browser width in order to display the collapse button for a navigation bar in Bootstrap? I believe media queries could assist with this, but I am unsure how to specify the minimum width of the browser window. ...
In my scss file, I currently have the following styling: .nav-pills .nav-link, .nav-pills .show > .nav-link { background: linear-gradient(120deg, #ddd 65%, #eee 65%); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: ...
I'm hoping for some help understanding the purpose of the ".embed-responsive-item" class in the code snippet below (Bootstrap code for responsive iframes, videos, etc.). It seems redundant to apply this class to the iframe element when it works just f ...
In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...
I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...
Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below: <div class="row mx-5 my-5 h-75 w-80"> <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advanc ...
Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...
I'm developing a website with a homepage that serves as an entry point to the rest of the site (it welcomes the user and allows them to click anywhere to access the main website). The following code accomplishes this: <template> <div onc ...
Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card ...
I have implemented the sample code provided in this link, with the addition of 2 extra form steps: LINK TO SAMPLE FORM My form consists of radio buttons (2 per page) instead of text boxes. How can I ensure that each form page is validated so that the for ...