What are some effective ways to align text with icons in centered navigation bars?

Looking to design a navigation menu with centered text and icons, while keeping the text aligned left to the icon? Want the link to adjust its width based on the container and also be responsive? Here's how:

How can you achieve this design?

CHECK OUT THE CODEPEN DEMO

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

HTML Code

<ul class="mobile-home-section">
    <li><a href="#">PROPERTY</a></li>
    <li><a href="#">FUTURE PLANNING</a></li>
    <li><a href="#">COMMERICAL</a></li>
</ul>

CSS Styling

.mobile-home-section {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    background: #163158;
}

.mobile-home-section li {
    background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
    background-repeat: no-repeat;
    background-position: 0 10px;
    padding-left: 50px;
}

.mobile-home-section li a {
    color: white;
    text-decoration: none;
    padding: 20px 0;
    display: block;
    border-bottom: 1px solid white;
}
htmlcss

Answer №1

UPDATE Modified the code to ensure responsiveness

If I were in your position, I would avoid using the icon as a background image for the link and instead opt to include the icon as an image within the link tag.

HTML

<div class="container">
  <ul class="mobile-home-section">
    <li>
      <a href="#">
        <span><img src="img2.jpg">PROPERTY</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span><img src="img2.jpg">FUTURE PLANNING</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span><img src="img3.jpg">COMMERCIAL</span>
      </a>
    </li>
  </ul>
</div>

CSS

.container {
  background: #273F87;
}

ul.mobile-home-section {
  display: block;
  list-style-type: none;
  padding: 0px;
}

ul.mobile-home-section li:nth-child(2) {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

ul.mobile-home-section li a {
  display: block;
  color: #fff;
  padding: 0px;
  font-family: serif;
  margin: 0px auto;
  text-decoration: none;
}   
ul.mobile-home-section li a span img {
  width: 50px;
  height: 50px;
  padding-right:20px;
  display: inline-block;
  vertical-align: middle;
}

ul.mobile-home-section li a span {
  padding: 10px 0px;
  width: 230px;
  display:block;
  margin: auto;
}

See Updated JSfiddle

Answer №2

Like many others have mentioned, using an image will make it easier to achieve the desired result. It's crucial to keep in mind that not all display: values support vertical alignment - I usually opt for display: inline-block, but if you're utilizing flexbox, display: flex may be more suitable.

Based on the situation, I typically employ one of these three methods:

  • Adjacent inline blocks
  • CSS tables
  • A pseudoelement with a background image

Below are examples illustrating each approach.

Things to consider:

  • In the case of the CSS table method, the <li> loses its bullet and automatically adjusts its width based on content - you might need to include width: 100% to #or-another li depending on your layout.
  • If the background image solution is used and the image size differs from the container, then applying 
    background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
    would be necessary.
  • All three scenarios take into account the scenario where either element could be taller. If you are certain the image will always be taller than the text, consider selecting #or-another span instead of #or-another li > *, and removing #one-more li span {...} altogether.

#one-way li > * {
  display: inline-block;
  vertical-align: middle;
}

#or-another li {
  display: table;
}
#or-another li > * {
  display: table-cell;
  vertical-align: middle;
}

#one-more li span {
  display: inline-block;
  vertical-align: middle;
}
#one-more li:before {
  content:'';
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: middle;
  background:url('https://placehold.it/200x200');
}
<ul id="one-way">
  <li>
    <img src="https://placehold.it/200x200" alt="" />
    <span>1</span><!-- or div or p or what have you -->
  </li>
</ul>

<ul id="or-another">
  <li>
    <img src="https://placehold.it/200x200" alt="" />
    <span>2</span>
  </li>
</ul>

<ul id="one-more">
  <li>
    <span>3</span>
  </li>
</ul>

Answer №3

To center align the content in the .mobile-home-section class and remove the left padding under the .mobile-home-section li class, add the following CSS properties:

.mobile-home-section {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    background: #163158;
    text-align: center; /* Added property to center align */
}

.mobile-home-section li {
    background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
    background-repeat: no-repeat;
    background-position: 0 10px;
    /* Removed padding-left: 50px; */
}

Check out the demo here.

Answer №4

Adjust the paddings and background-position to customize your design.

.container {
width: 600px;
}

.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}

.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position:50% 15px;
    padding-left: 50px;
}

.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align:left;

}

Give this updated code a try

.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align: left;
}

Make sure to update the padding of .mobile-home-section li a with the specified values

Answer №5

Check out my codepen below for a showcase of some selectors that could use a little bit of improvement:

<div class="container">
<ul class="mobile-home-section">
    <li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>PROPERTY</span></span></a>
    </li>
    <li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>FUTURE PLANNING</span></span></a>
    </li>
    <li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>COMMERICAL</span></span></a>
    </li>
</ul>


.container {
    width: 600px;
}

.mobile-home-section {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    background: #163158
}

.mobile-home-section li {
    margin: 0;
    padding: 0;
}

.mobile-home-section li a {
    display: block;
    height: 3em;  
}

.mobile-home-section li a > span {
    display: block;
    width: 55%;
    padding: 0;
    margin: 0 auto;
    text-align: left;
}

.mobile-home-section li a > span > span {
    line-height: 2em;
    font-size: 1.4em;
    position: relative;
    top: -0.4em;
}

.mobile-home-section li span img {
    margin-right: 0.75em;
    height: 2.6em;
    position: relative;
    top: 0.2em;
}

.mobile-home-section li a {
    border-bottom: 1px solid white;
    color: white;
    display: block;
    font-family: 'Times New Roman';
    font-size: 1.2em;
    padding: 0;
    text-align: center;
    text-decoration: none;
}

http://codepen.io/anon/pen/PZwvZz

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

Align a link in the middle along with the header beside it

My HTML header currently has a simple title bar with a back href. However, the headline <h1> is positioned UNDER the href, which is not what I want. I am looking to create a centered title bar with a headline and a button that are aligned at the same ...

htmlcss

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

jquerycssblogs

The jquery UI button is displaying too wide even though the padding is set to zero

My goal is to decrease the width of certain jQuery buttons. Though I have attempted to eliminate padding using the code below, there remains a minimum of 5 pixels on either side of the text within my button. .button().css({ 'padding-left':' ...

javascriptjquerycssjquery-uibutton

Positioning of vertical linear gradients in CSS

Check out this live demonstration: http://jsfiddle.net/nnrgu/1/ I then adjusted the background position to 0px -70px and observed the changes here: http://jsfiddle.net/nnrgu/2/ The linear gradient seems to disappear! Am I doing something wrong, or is ...

css

The Bootstrap grid maintains its mixed size without collapsing at the specified breakpoint

My goal is to create a 6-column layout for desktop and larger screens, but I want it to collapse into 4 columns for laptops. However, when using the code below, the grid does not collapse at the expected breakpoint. I even tried changing the class to "cont ...

htmlcssbootstrap-4

Tips for using Python to capture specific HTML snippets

Here is a Python code snippet that I am working on: def parseAddressInfo(text): text = re.sub('\t', '', text) text = re.sub('\n', '', text) blocks = re.findall('<div class="result-box" ...

pythonhtmlregex

In order for the JavaScript function to properly execute, it requires the page to be

Check out this code snippet: <script> function scaleDown() { $('.work > figure').removeClass('current').addClass('not-current'); $('nav > ul > li').removeClass('current-li'); ...

javascriptjqueryhtml

Using jQuery to Extract Content from Frames (excluding iframes)

My website originally had jQuery functioning fine with a header, sidebar, and main content. However, my manager made the decision to convert these elements into separate frames using the <frame> tag instead of iframes, causing numerous issues. One i ...

jqueryhtml

How can I use JQuery to display an image when clicked and then hide it after a certain amount of time

Currently, I am in the process of developing a basic Simon game and I am seeking the most straightforward method to implement a feature where clicking on one of the four buttons changes its image for a brief moment (in "on" mode), plays a sound, and then r ...

javascriptjqueryhtml

Internet Explorer often fails to interpret html tags correctly

A strange issue is occurring with Internet Explorer on a website, where it seems to be misinterpreting the code. Instead of reading <tag></tag>bla bla</tag><//tag>, it shows something completely off. An example of this problem can b ...

csshtmlinternet-explorer

Transform the header style columns of react-js Material-tables into rows

Currently experimenting with gradient designs on a material table. While I am able to apply the right color combination to the rows, I seem to be getting column-based results on the title of the table. Attached is a screenshot of my output for reference. ...

javascripthtmlcssreactjsmaterial-ui

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql

Troubleshooting Polymer 1.6: Issue with Element Styling

I've been struggling for hours to style a Polymer element. Despite following various guides and tutorials, nothing seems to be working. Here is the code snippet: http://codepen.io/nanobird_/pen/pEWWqW/ Below is my DOM module code: <script src="h ...

csspolymer

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

htmlcsscss-selectors

Strategies for Emphasizing Individual Content Links on a Single-Page Website with Dynamic Content Replacements

My website consists of a single page with content that gets replaced using jQuery when the menu is clicked. Even though the links do not lead to different pages, just different divs, I want the menu to behave like a typical website menu with three states: ...

jquerycssnavigationhighlightcurrent-page

Utilizing Bootstrap classes exclusively to position icons and divs in alignment

Here is the code snippet I'm working with <div class="row"> <h3><b>We've got you covered</b></h3> <h6>Find things to do in cities around the world</h6> <div class=&quo ...

htmlcssbootstrap-4

Unveiling Extra Form Fields Based on Selected Radio Buttons using html and css

I need to display different form fields depending on whether the credit card radio button or debit card radio button is selected. Currently, when I select a radio button, only the corresponding form fields are visible. Current Code <div class="forc ...

javascriptjqueryhtmlcssforms

Does jQuery have a method called .findUsingParent() that can be used for searching elements?

div.tabs serves as a container for tab control. Each individual tab is represented by div.tab, which is a child of div.tabs. The currently active tab is identified by div.tab.active. .data represents an element that can exist within any div.tab, or even d ...

javascriptjqueryhtmlcss

Troubleshooting Layout Problems in HTML and CSS

My goal is to build a straightforward webpage template with 3 distinct sections: a header with two columns, a main body, and a footer. Here's the layout I've been working on: <div id="wrapper"> <div id="header"> <heade ...

csshtmlfooter

Error in Javascript: Required variable missing for Sendgrid operation

I am facing an issue while attempting to send an email using sendgrid. Whenever I execute the function, it gives me an error saying "Can't find variable: require". Despite my efforts to search for a solution online, I have not been able to resolve thi ...

javascripthtmlnode.jssendmail