The implementation of subnavbars within a navigation bar using HTML and CSS

I am looking to align the Login button with the settings icon on the same line above the links in my navbar.

Is there a way to accomplish this?

Check out this fiddle that demonstrates my issue:

FIDDLE

Here is the code I have written:

<body>
<div>
<header>

</header>
<nav class="navbar navbar-default">
  <div class="container-fluid pull-right" id="nav_login">
    <ul class="nav navbar-nav">
      <li>
        <a href="#">Login</a>
      </li>
      <li>
        <i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i>
      </li>
    </ul>
  </div>
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a id="nav_processes" href="#">Processes</a>
        </li>
        <li>
          <a id="nav_reports" href="#">Reports</a>
        </li>
        <li>
          <a id="nav_alerts" href="#">Alerts</a>
        </li>
        <li>
          <a id="nav_scheduler" href="#">Scheduler</a>
        </li>
        <li>
          <a id="nav_admin" href="#">Admin</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
   <div class="container-fluid" id="hidden_container">
    <div id="processes_subnav" style="display: none;">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Details</a>
        </li>
        <li>
          <a href="#">Create</a>
        </li>
      </ul>
    </div>
    <div id="reports_subnav" style="display: none;">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Details</a>
        </li>
        <li>
          <a href="#">Assistance</a>
        </li>
      </ul>
    </div>
    </div>
   </nav>
   <div>
  </div>

  <footer></footer>
  </div>

CSS:

* {
  font-family: 'Source Sans Pro', sans-serif;
}

.navbar-default .navbar-nav > li > a {
 color: white;
}

.navbar-default {
 background-color: black;
 border-color: black;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
  color: white;
}

.navbar-default .navbar-nav > li > a {
  outline: none;
}

#nav_login {
  height: 10px;
  font-size: 10px;
}

#settings_icon {
  color: white;
  font-size: 1.5em;
}

EDIT:

Apologies if my explanation was unclear, but what I really want is to have the login button beside the settings icon in the original position (upper right corner)

Answer №1

Surprisingly simple, just encase it with a anchor tag ;)

<a href><i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i></a>

Doesn't it need to be a clickable link regardless?

Answer №2

Minor modifications

HTML:

<ul class="nav navbar-nav right">
      <li>
        <a href="#">Sign In</a>
      </li>
      <li>
        <i id="settings_icon" class="fa fa-cogs" aria-hidden="true"></i>
      </li>
    </ul>

CSS:

.nav.navbar-nav.right{
  display: flex;
  align-items: center; 
 }
 .nav.navbar-nav.right li a{
   padding: 0 10px;
 }

Check out the revised Demo

Answer №3

Check out this live example: http://jsfiddle.net/804jeg82/545/

I've just made some adjustments to your css file.

.navbar-nav {
  display: flex;
  align-items: center;
}

This utilizes the flexbox technique for styling.

To learn more about flexbox, visit:

<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>

I hope this information proves helpful to you. Best of luck with your project!

Answer №4

To eliminate the top padding on the login link, you can simply use this CSS code:

#nav_login a { padding-top : 0; }

Answer №5

You have the option to incorporate

margin-top: 16px

into your "#settings_icon" identifier. This adjustment may address any alignment concerns you have with the icon.

For reference, please visit:http://jsfiddle.net/804jeg82/548/

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

Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/ I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to wor ...

Ensure that the height of the div matches the height of the background image

Although I've seen similar questions before, none of the solutions seem to be effective in my case. In this scenario, there's a div class that has a background image set up: #index-box{ border-radius: 20px; background: url('/stati ...

Using jQuery to insert HTML content into a div element by replacing a specific string

I am faced with a situation where I have <div class="test">hello everyone</div> and the challenge is to replace each instance of "hello" within this div with <h1>helllo</h1> In my attempt, I used $(this).text().replace("hello" ...

Creating uniform height for Definition Terms (DT) and Definition Descriptions (

Looking to creatively style a description list <dl> in a way that showcases two columns, even when there are multiple <dd>s following the <dt>. The challenge lies in wanting this design to be dynamic without resorting to floating the < ...

Utilizing KineticJS in HTML5 for image transformation and saving to a web service completely free

I'm looking to utilize kinetic to manipulate a single image using anchor points. I stumbled upon this helpful example: My goal is to save only the yoda image (id: myImg) and send it to a web service. However, I'm encountering difficulties with t ...

Struggling with Getting My Animation to Function Correctly

I am trying to create a JQuery Animation that will move a div covering a text box up into the border when clicked. Despite multiple attempts, I can't seem to get the animation to work properly. Any suggestions? JavaScript function moveup(title,text ...

Issue arising from failure to check the checkbox

My ajax request is sending form data to an external PHP script and returning a result, but I'm encountering an error: Uncaught SyntaxError: Unexpected token < index.php hr.onreadystatechange This error occurs when trying to send the form without ...

Attention! Are you aware of the potential consequences of the impending phase-out of the name attribute in W3C validation? Have you considered how this development

Any thoughts on what could replace the name attribute? According to the W3C validator... Validation Output: 4 Warnings Here is a list of the warning message(s) generated while checking your document. Warning Line 12, Column 21: The name attribute i ...

I don't want my background image to repeat, but I'm not sure how to stretch out the tile

Hey there, I would appreciate it if you could refrain from criticizing me or giving me negative feedback as I have put in the effort to search for an answer. After extensive research, this is what I have found so far. My goal is to set a background image f ...

What is the best method for creating a loop script within a widget using script?

I am trying to implement a loop within a widget, however, the widget contains an internal script: <!DOCTYPE html> <html><head></head><body> <script> list=["AMAR3","BBDC4", "BEEF3", "BPAN4", "BRFS3", "B3SA3", "CVCB3" ...

Guide to integrating jssor into an AngularJS application

Struggling to integrate jssor with angularjs, it seems to be failing because jssor is being initialized before angularjs, causing the ng-repeat elements to not resolve correctly. <div id="slider1_container"> <div u="slides"> <!-- Th ...

What is the best way to retrieve the content of a file and set it as the value

exam.php <div class='btitle'>LOREM</div> main.php <?php $content = file_get_contents('exam.php'); ?> <textarea class='txa' value = <?php echo $content; ?>></textarea> outcome text ...

rely on a fresh event starting at one

Despite my limited knowledge in javascript, I managed to create a simple js calendar that I am quite proud of. However, I have been facing a challenge for the past few days. You can view my calendar here: https://jsfiddle.net/ck3nsemz/ The issue I'm ...

Looking to switch up the hide/show toggle animation?

Currently, I have a functioning element with the following code. It involves an object named #obj1 that remains hidden upon page load but becomes visible when #obj2 is clicked. #obj1{ position:fixed; width:100px; bottom:180px; right:10 ...

Linking Background Images in HTML

Is there anyone who can provide assistance with this question? I am looking for a solution where I can have a link with a background image, placed in a row within a table. Your help would be greatly appreciated. Thank you ...

Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it ...

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working! If you have any insights or suggestions, please let me know. Your help is greatly a ...

What could be the reason for <input type="email"> flagging legitimate email addresses as invalid?

According to information from Wikipedia, the following email addresses are considered valid. " "@example.org "john..doe"@example.org "very.(),:;<>[]\".VERY.\"very@\\ \"very\". ...

Photographs within a line of HTML tables

I have been struggling with this issue, and it's honestly such a simple mistake! All I need is for each picture to be accompanied by a small box below it containing the name. I want all 4 pictures to be displayed in a row. However, when viewing this ...

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the ...