Adjust the select box size to be in line with the text box dimensions

I'm struggling to understand why there are two boxes visible in my navigation bar.

For example, when looking at the Home link, I notice that there are actually two boxes; one containing the text "Home" and another one that extends outwards to the right side of the screen.

I would like to adjust the size of the protruding box so that it aligns with the text box for the links labeled 'Home, Projects, About Me, and Resume'. This is mainly for aesthetic reasons and also because when hovering on the right side of the Projects link, the menu unexpectedly appears.

Check out this link for more details

* {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

header {
  position: fixed;
  width: 100%;
  background: #4168a8;
}

.container {
  width: 90%;
  height: 75px;
  margin: 0 auto;
}
 
...remaining code...
</body>
</html>

htmlcss

Answer №1

Include margin-right: 0 in the styling for nav li a and adjust the margin of 35px to be applied to nav li instead - you can view the demonstration below:

* {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

header {
  position: fixed;
  width: 100%;
  background: #4168a8;
}

.container {
  width: 90%;
  height: 75px;
  margin: 0 auto;
}

nav {
  color: white;
  float: left;
  font-size: 14px;
  font-family: Raleway;
  text-decoration: none;
  margin-top: 11px;
  -webkit-font-smoothing: antialiased;
}

nav li {
  display: inline;
  list-style: none;
  margin-right: 35px; /*MODIFICATION HERE*/
}

.title {
  color: #DB5461;
  font-size: 24px;
  font-family: Raleway;
  text-decoration: none;
  margin-right: 35px;
  letter-spacing: 1px;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 35px;
  position: relative;
  display: inline-block;
  padding: .4em;
  padding-left: .2em;
  padding-right: .2em;
  text-transform: uppercase;
}
nav li a { /*ADDITIONAL CHANGE*/
  margin-right: 0;
}

.projects {
  padding-bottom: 10px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  width: 91px;
  text-align: center;
  margin-top: 10px;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #f9f9f9;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  text-transform: lowercase;
  margin: 0px;
  font-size: 14px;
}

.dropdown:hover >.dropdown-content {
  display: block;
}

.dropdown-content a:hover {
  /* When you hover over items in dropdown */
  background-color: #ddd;
}

.underline_animation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #222;
  -webkit-transform: scaleX(0);
  visibility: hidden;
  -webkit-transition: all .6s ease;
}

.underline_animation:hover::after {
  -webkit-transform: scaleX(1);
  visibility: visible;
}

.links {
  float: right;
  margin-top: 26px;
}

.links a {
  margin-left: 20px;
  text-decoration: none;
  display: inline-block;
}

.links a:hover {
  opacity: 0.7;
}

body {
  margin: 0;
  background: #222;
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Belleza" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
  <title>mytitle</title>
  <link rel="icon" href="images/favicon.png">
</head>

<body>

  <header>
    <div class="container">

      <nav>
        <a href="#" class="title">my title</a>
        <a>|</a>

        <li>
          <a href="#" class="underline_animation">home</a>
        </li>

        <li class="dropdown">
          <a href="#" class="projects">projects&nbsp; &#9662;</a>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </li>

        <li>
          <a href="#" class="underline_animation">about me</a>
        </li>

        <li>
          <a href="files/resume.pdf" class="underline_animation">resume</a>
        </li>
      </nav>

      <div class="links">
        <a href="#" target="_blank">
          <img src="images/linkedin_icon.png" height="25" width="25">
        </a>
        <a href="#" target="_blank">
          <img src="images/github_icon.png" height="25" width="25">
        </a>
      </div>

    </div>
  </header>


</body>

</html>

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

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

I'm currently in the process of developing a website using bootstrap3. Despite watching numerous tutorial videos, I am still facing challenges. One of my goals is to have the logo on the navbar aligning with the left side (which I've achieved ...

htmlcsstwitter-bootstrap-3

.click function failing to trigger on dynamically loaded form

I'm facing an issue with a form that displays images from my database. After retrieving the filepaths, they are loaded dynamically into the form along with a "Delete" <button> for users to delete the image via AJAX. Although I can successfully ...

javascriptphpjqueryhtmlajax

Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me. If there is an alternate method in Angular to achieve this, please ...

javascriptjqueryhtmlcssangularjs

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

htmlcssoutlookhtml-email

Is there a way to automatically fill a form from a database using the HTML column of a gridview?

I have developed an asp.net webform that contains checkboxes and textboxes. Upon submission, the data is stored in a SQL Server database. In addition to this form, I have created another webform with a gridview displaying the submitted data. My goal is t ...

c#jqueryhtmlasp.netgridview

Tips for displaying a loading message during an AJAX request?

My AJAX function is set up like this: function update_session(val) { var session_id_to_change=document.getElementById('select_path').value; $.ajax({ type: "GET", url: "/modify_path/", asy ...

javascripthtmlajax

Developing an unchanging structure for HTML pages

I need assistance in designing an HTML layout with a fixed toolbar at the top and bottom, along with a single centered DIV that should be responsive when the user resizes the window both vertically and horizontally. I have attached a mockup/screenshot fo ...

csshtmllayout

Efficiently Displaying Multiple HTML Elements in React Native WebView

I am currently working on developing an Epub reader in React Native and facing a challenge. I need to find a way to efficiently transfer multiple html content files from the Epub container to the webview in order to achieve seamless pagination. ...

javascripthtmliosreact-nativeepub

Using jQuery to show text upon hover using a `for` loop

I'm currently working on a webpage and incorporating a feature where hovering over specific div elements triggers the display of certain text in another div. There are 5 elements that I want to make hoverable and show text upon interaction. After imp ...

javascripthtmljquerycss

Leveraging the power of Angular to send the contents of a div via email

I have a div element with a specific class name and I am currently exploring ways to extract the rendered components of that div as text in order to include it in the body of an email. I have tried various methods such as using classes and ng-model, but so ...

javascripthtmlangularjsemail

The specified selector is invalid or illegal in HTMLUnit

Attempting to mimic a login using htmlunit has presented me with an issue despite following examples. The console messages I have gathered are as follows: runtimeError: message=[An invalid or illegal selector was specified (selector: '*,:x' erro ...

javajavascriptcsshtmlunitweb-crawler

Utilize data retrieved from an API to customize the appearance of buttons through the combination of React and Sass styling techniques

I retrieved data from an API and used it to create a list of buttons. The data I received includes names and color codes. { name: "bob", colorCode: "#DC7472" }, { name: "ben", colorCode: "#69DCD1" }, { name: &q ...

javascriptcssreactjssass

evolving the design of mui stepper

I am looking to customize the code below for my specific needs I want to change the icon from https://i.sstatic.net/dtPHU.png to this: https://i.sstatic.net/ct7Zv.png I am unable to modify the style and also need to add an intermediate step I have incl ...

cssreactjsmaterial-uistepper

Styling with CSS: Enhancing list items with separators

Is there a way to include a separator image in my list using CSS? li { list-style: none; background-image: url("SlicingImage/button_unselect.png"); height: 53px; width: 180px; } This is the code for the separator image: url("SlicingImage ...

css

Is there a way to detect when the user closes a tab or browser in HTML?

I am currently developing a web application using the MVC architecture and I need to find a way to detect when a user closes their browser tab so that I can destroy their session. My tech stack includes jsp (html, js) and java. Any suggestions on how to ...

javascriptjavahtmljsp

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

javascripthtmlcssregex

Tips on adjusting the font size of headers in a Vuetify v-data-table?

I've been struggling to change the font size of the headers in my v-data-table. No matter what I try, the font doesn't seem to update. I even experimented with the Chrome developer tool and managed to make it work there. However, when I attempt t ...

cssvue.jsvuejs2vuetify.jsv-data-table

Update the background URL of a div element using an HTML tag

My question is about a CSS div with set dimensions and background that I want to change on hover. I am aware that this seems like a simple task, but what I really want to do is retrieve the background sources from within the HTML tag itself. For example: ...

javascripthtmlcss

Can someone please explain how I can implement a multi-submenu feature using JavaScript?

HTML CODES: <header> <nav> <ul> <li class="asmenu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a> <ul class="submenu deact ...

javascripthtmlcsstogglesubmenu

IIFE and the Twitter share button are a powerful duo

As I experiment with this quick creation of mine, two questions have arisen. The first one is, how can I encapsulate all the JS code within an IIFE without breaking it? The second question is about finishing the twitter button to enable sharing the act ...

javascripthtmlapitwitteriife