Symbol placed atop text within a navigation bar

I am in the process of creating a custom menu for my website. I want to include an icon with text underneath, but when I add the text it shifts to the right and messes up the alignment.

Menu with Icon Only

Menu with Text (causes alignment issues) 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.adminNavigation {
  width: 100%;
  height: 80px;
  background-color: #ebebeb;
  border-radius: 3px;
}
.adminNavOptions {
  display: table;
  margin: 0 auto;
  line-height: 80px;
}
.adminNavOptions li {
  display: inline-block;
  padding-right: 62px;
  padding-left: 62px;
}
.adminNavOptions li:hover {
  background-color: #000;
}

EDIT - After implementing Gleb Kemarsky's code, there are still some issues with vertical alignment of the icon and text:

ICONHERE
  txt

Additionally, the width of the menu bar does not adjust according to the number of list items. I attempted to use width:auto; https://i.sstatic.net/4quuN.png

htmlcsstwitter-bootstrapnavbar

Answer №1

Here are some recommendations for improving the design:

  1. .adminNavigation

    • Remove display: table;.
    • Set the padding-left property to zero.

  2. .adminNavOptions li

    • Change display: inline-block; to display: block; float: left;.
    • Replace 
      padding-right: 62px; padding-left: 62px;
      with 
      text-align: center; width: 16.66666667%;
      .

  3. icon

    • To align the icon above the text, adjust the properties of <li> and use the .iconAbove class.
    • If you want the icon next to the text, change the vertical position using position: relative; top: 9px;.

  4. :hover

    • Enhance visibility by using a contrasting color for text on hover.
    • Add border-radius styling for the first and last <li> elements.

Take a look at the updated CSS code snippet below:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.adminNavigation {
  height: 80px;
  background-color: #ebebeb;
  border-radius: 3px;
}
.adminNavOptions {
  margin: 0;
  line-height: 80px;
  padding-left: 0;
}
.adminNavOptions .fa {
  position: relative;
  top: 9px;
}
.adminNavOptions .iconAbove {
  height: 80px;
  line-height: normal;
  padding-top: 11px;
}
.adminNavOptions .iconAbove .fa {
  display: block;      
  position: static;
}
.adminNavOptions li {
  display: block;
  float: left;
  text-align: center;
  width: 16.66666667%;
}
.adminNavOptions li:hover {
  background-color: #000;
  color: #fff;
}
.adminNavOptions li:first-child:hover {
  border-radius: 3px 0 0 3px;
}
.adminNavOptions li:last-child:hover {
  border-radius: 0 3px 3px 0;
}
<div class="col-md-offset-3 col-md-6">
  <div class="adminNavigation">
    <ul class="adminNavOptions">
      <li class="iconAbove"><i class="fa fa-play fa-3x"></i> test</li>
      <li><i class="fa fa-play fa-3x"></i> test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

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 way to retrieve the :hover css style of an anchor using jQuery?

Is it possible to dynamically add :hover effects using jQuery in a CSS stylesheet? Here is a basic example: a.bar { color: green; font-size: 13px; } a.bar:hover { color: purple; font-size: 14px; } How can one access the color and font- ...

jquerycsshoveranchor

Retrieve the URL by ID from the article when expanding the accordion

I am trying to include the article ID in the URL when the a href link is clicked in the code below. I've updated the code to include the PHP section and added a while loop with the article ID. require_once("inc/connection.php"); mysql_select_db("nie ...

phphtml

How can we enhance the appearance of a row of text by adding a background to the first letter?

Take a look at the image attached below: I quickly created this in Photoshop for corporate identity on documents. Now, I need to replicate it for an email signature. However, I'm not sure how to create a square/rectangular background for the first le ...

htmlcss

What sets apart compressing test.min.css from compressing test.css?

Recently, I have transitioned to a new job role with a different employer. In my previous workplace, we utilized LESS and compiled it into a .css file before compressing it further into a .min.css file. However, in my current position, we also work with L ...

csslessminify

Prevent my buttons from altering their color when hovered over

I have created some visually appealing buttons that I am satisfied with, but when a user clicks on one, the text color changes and the button's hover behavior is altered. I utilized this generator to design the buttons: Below is the CSS code for my b ...

cssruby-on-railstwitter-bootstrap

Customizing the Bootstrap 4 navbar to have no fixed height on mobile devices

Is there a way to adjust the height of the Bootstrap 4 navbar for all viewport sizes to be 80px? I attempted using "min-height: 80px" in ".navbar", but it ended up breaking the layout. Here is the SASS code snippet: $navbar-bg: #26f3fd; $nav ...

navbarbootstrap-4

How to activate the horizontal scrollbar in a jqgrid table

How can I enable horizontal scroll in jqgrid when the grouped text is longer than the table width? The table width is set to approximately 50% of the screen, but when the grouping text exceeds 300 characters, adding overflow property results in the text g ...

cssjqgridscrollbar

There seems to be an issue with the functionality of the Django's div class alert alert-danger feature

Here is my custom code for handling user sign-up in Django: class SignUpForm(forms.ModelForm): name = forms.CharField(label="name", required=True, widget=forms.TextInput()) email = forms.CharField(label="email", required=True, ...

htmlcsspython-3.xdjango

Dynamic Content Sorting with JavaScript and jQuery

I am presenting various courses that are available, and I am utilizing JavaScript/jQuery to display or hide them based on element classes. You can view the page here. Currently, the script conceals all content on the page and then reveals items that matc ...

javascriptjqueryhtml

Menu options

I am currently working on developing a mouseover navigation website. Initially, my design included main buttons for "Our Team", Locations, and Patient Resources. Here is the basic structure I had before attempting to switch to a mouseover approach... &l ...

javascripthtmlcssdrop-down-menunavigation

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

pythonhtmlcssdjango

Can you identify the HTML table format and suggest effective web scraping methods?

I have been attempting to retrieve data from the following link, http://www.rchsd.org/doctors/index.htm? strt = 0 & ln = & fn = & sp = & grp = & loc = & lng = & gen = , using R but finding it quite challenging. I have observed that the URL remains constan ...

javascriptjqueryhtmlrweb-scraping

Reduce the gap between the content and footer

I'm currently designing a homepage for a press release. I'm facing an issue with a large gap between my content and the footer, which I'd like to reduce. I've tried adjusting the margin-top: 0px in CSS with no success. Various attempts ...

htmlcsslaravelbootstrap-4

When the Mat menu radio button inside a Bootstrap popover is clicked, it will automatically close the popover

I have a popover from Bootstrap with the autoclose attribute set to "outside" in order to close the popover when clicked outside of it. The issue I'm facing is that inside the popover, there is a material menu that opens outside of the popover. The pr ...

angulartwitter-bootstrapbootstrap-4angular-material

Exploring the fundamentals of Python through beautiful soup parsing

Assuming I use: date = r.find('abbr') To retrieve: <abbr class="dtstart" title="2012-11-16T00:00:00-05:00">November 16, 2012</abbr> I simply aim to display November 16, 2012. However, when attempting: print date. ...

pythonhtmlbeautifulsoup

Blazor .NET 8 Horizontal Navigation Bar Alignment Issue

My attempt to implement a Bootstrap NavBar in an ASP.NET Core 8 Blazor website with Bootstrap 5.x is not working as expected. The menu items are not lining up horizontally and the drop-down functionality is not functioning properly. Unfortunately, the side ...

asp.net-corebootstrap-5navbar

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb

Tips on positioning the navbar to the right edge of the screen

Currently using bootstrap, in the process of learning css and bootstrap. Looking to align links within ul to the far right of the screen. Assistance would be greatly appreciated <nav class="navbar navbar-expand-lg navbar-light bg-light"> ...

cssbootstrap-5

Tooltips experience issues when interacting with elements that do not utilize the :active state

$(function () { $('[data-toggle="tooltip"]').tooltip() }) <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Utilizing LESS for Mixing

I've been diving into the official LESS documentation (version 1.5) and I'm struggling to grasp how I can import a reference to another CSS file to utilize its content in my own stylesheet. For instance: stylesheet.less @import (reference) "boo ...

csstwitter-bootstraplessmixins