Tips on positioning the search icon to the right

Does anyone know how to position the font awesome search icon to the right of the "Sign Up" text?

Check out this screenshot of my navigation bar for reference:

https://i.sstatic.net/vIGzP.jpg

I've looked through various tutorials online, and they all suggest using float: right; but that solution doesn't seem to be working in my case.

body {
  margin: 0;
  padding: 0;
  margin-top: 130px;
  overflow-x: hidden;
}

.nav-menu a img {
  float: left;
  margin-left: 10px;
}

.nav-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  margin-top: -130px;
}

.nav-menu li {
  float: left;
}

.nav-menu li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-menu li a:hover,
.dropdown:hover .dropbtn {
  border-top: 2px solid #ff0000;
}

.nav-menu li.dropdown {
  display: inline-block;
}

.nav-menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-menu .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-menu .dropdown-content a:hover {
  background-color: #ff0000;
  color: #fff;
}

.nav-menu .dropdown:hover .dropdown-content {
  display: block;
}

.nav-menu li.social {
  float: right;
}
<div class="nav-menu">
  <ul>
    <a href="#"><img src="img/logo.jpg" style="width:50px"></a>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Games</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Crews</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="#">Jobs</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">News</a></li>
    <li class="social">
      <a href="#">Sign In</a>
      <a href="#" style="color:#ff0000">Sign Up</a>
      <li><a href="#"><i class="fas fa-search"></i></li></a>
  </ul>

htmlcss

Answer №1

The issue lies in the <li> element wrapping the search icon, which is invalid HTML syntax. The <li> tag cannot be a direct child of another <li> tag. It should be replaced with an <a> element instead.

body {
  margin: 0;
  padding: 0;
  margin-top: 130px;
  overflow-x: hidden;
}

.nav-menu a img {
  float: left;
  margin-left: 10px;
}

.nav-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  margin-top: -130px;
}

.nav-menu li {
  float: left;
}

.nav-menu li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-menu li a:hover,
.dropdown:hover .dropbtn {
  border-top: 2px solid #ff0000;
}

.nav-menu li.dropdown {
  display: inline-block;
}

.nav-menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-menu .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-menu .dropdown-content a:hover {
  background-color: #ff0000;
  color: #fff;
}

.nav-menu .dropdown:hover .dropdown-content {
  display: block;
}

.nav-menu li.social {
  float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="nav-menu">
  <ul>
    <li><a href="#"><img src="img/logo.jpg" style="width:50px"></a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Games</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Crews</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="#">Jobs</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">News</a></li>
    <li class="social">
      <a href="#">Sign In</a>
      <a href="#" style="color:#ff0000">Sign Up</a>
      <a href="#"><i class="fas fa-search"></i></a>
    </li>
  </ul>
</div>

Answer №2

Apologies for being a bit tardy in my response to this question, but I believe I have come up with an enhanced solution!

The previous answer still contains syntax errors. It would be beneficial to convert your dropdowns into nested ul elements. :-)

By utilizing display: flex and align-items: center on the .nav-menu class, you can align all elements without resorting to float (which can often lead to unexpected behavior).

I've also included margin-left:auto on your .social container, which will shift all social icons to the end of their parent element.

EDIT: To prevent text shifting when applying a colored border on :hover, use border-top: transparent on menu items to simply display the color effect.

Your code snippet is available below:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- example markup -->

<div class="nav-menu">
  <a href="#"><img src="img/logo.jpg" style="width:50px"></a>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Games</a>
      <ul class="dropdown-content">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Crews</a>
      <ul class="dropdown-content">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#">Jobs</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">News</a></li>
  </ul>
  <ul class="social">
    <li><a href="#">Sign In</a></li>
    <li><a href="#" style="color:#ff0000">Sign Up</a></li>
    <li><a href="#"><i class="fas fa-search"></i></a></li>
  </ul>
</div>

To see the full visual effect, view the snippet in full screen mode.

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

Unusual behavior encountered while attempting to reset input text using AngularJS

I'm encountering an issue with what I assumed would be a straightforward scenario. Here is the form in question: <form class="form-inline" role="form"> <div class="form-group"> <input type="text" ng-model="customerInput" size="80 ...

htmlangularjs

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

My input HTML field is disabled, but I've noticed that in some browsers (such as Chrome, Edge, Internet Explorer, and Opera), it's still possible to select and copy the text. However, in Firefox, this functionality does not work. To test this yo ...

javascripthtmlcssangular

Guide to updating text color in marquee tag with each reload

Seeking assistance in addressing the following issues... On each refresh, I want to change the text color within a marquee tag by utilizing a JavaScript function. I have obtained a color code like #18EEC5... however, when attempting to call the script fun ...

javascripthtml

Ways to deactivate antd css-dev-only styles

I am currently working on a nextjs project using tailwind and antd. I am facing an issue where the antd Layout component styling is being applied and I am unable to remove it. :where(.css-dev-only-do-not-override-12upa3x).ant-layout-header This styling is ...

htmlcssnext.jstailwind-cssantd

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...

javahtmlseleniumclickmarquee

AngularJS chatbox widget for interactive communication

Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...

javascripthtmlnode.jsangularjsangular-bootstrap

Struggling to successfully validate a user's return value with AJAX

When the user enters incorrect information, I need to ensure that the okLogin variable is set to false and prevent the form from being submitted. However, I have noticed that the return statement in my function is being executed before the ajax call, which ...

javascripthtmlajax

Cross-origin resource sharing (CORS) issue encountered while trying to play an mp

I am facing an issue with my React application where it is unable to play audio from a different source due to a CORS error. Example: Interestingly, when I visit https://www.w3schools.com/tags/tag_audio.asp, input the above URL and click play, it works fi ...

htmlreactjshtml5-audio

How can I make CSS images appear beside specific links?

Currently, I have implemented the following CSS: .entry a { padding: 2px 0 0 8px; background: transparent url(images/link_arrow_light.gif) left top no-repeat; text-decoration: underline; } It is functioning correctly, but the image is being added t ...

cssimagehyperlink

Trigger a jQuery function upon clicking a button

I am attempting to create a jQuery function that can be called independently, and then trigger the function when a click event occurs. Below is the code I have put together: HTML: <input type="text" class="form-control email_input" name='email&ap ...

javascriptjqueryhtml

Struggling to properly position a search input and submit button in a navbar on smaller screens

While creating a search view for a website, I noticed that the search box and submit button placed next to it (aligned to the right at most screen widths) would become misaligned in very small max-widths. Using Bootstrap 4, I utilized ".ml-auto" to align ...

cssbootstrap-4alignmentnavbar

Utilizing the 'as' controller attribute in external JavaScript files

I have a JavaScript mapping component that includes a map and I want to customize the color based on user preferences set in an Angular 1.5 'as' controller. Here is an example of my controller code: app.controller('PreferenceController&apo ...

javascripthtmlangularjs

Is it possible to insert HTML content as plain text into a div?

Currently, I have a code that extracts HTML stored in a string and places it into a div with the contenteditable attribute set to "true". However, I'm facing an issue where the HTML is being executed as part of the page instead of being treated as tex ...

javascripthtml

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

I am struggling to make mod_proxy_html function properly - no signs of debug output or errors

I have Apache version 2.0.52 running and I've successfully compiled the mod_proxy_html module (version 3.1). Apache starts without any errors, however, the issue I'm facing is that the module doesn't seem to be doing anything - there's ...

htmlapacheproxymod-proxy

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music. The issue is that the ...

htmlcssangularangular-material

Adjust the size of the window to prevent the text from shifting

How can I lock text and tables in place when resizing the window? Can someone provide an example? ...

htmlcss

Is the logo stretching when adding an image in a bootstrap row?

Attempting to utilize Bootstrap 4 for website development, I encountered an issue when adding a logo image and text to the header. The image became stretched, as seen below: https://i.sstatic.net/3qRnE.png Below is the HTML code used: <header> &l ...

htmlcssbootstrap-modalbootstrap-4

Tips for achieving vertically centered text wrapping around a floating image

Describing it in words is proving to be difficult, so let me just illustrate it for you. In the following images, the horizontal lines represent the "text", the small box symbolizes the image, and the larger box encompasses the entire webpage. My goal is ...

htmlcss