The orientation of the HTML elements changed from horizontal to vertical when an <a> tag was included. Any suggestions on how to prevent this?

I encountered an issue where adding <a href=> around the font awesome icons (facebook, twitter) caused them to stack vertically. Despite multiple attempts to fix it by adjusting display settings and widths, I have not been successful. Any help would be greatly appreciated.

This stacking behavior only occurs on desktop due to a specific media query. Please ensure that the screen is large enough. Additionally, how can I disable the navbar collapse?

http://jsfiddle.net/y5mav/

<a href=""><li><i class="fa fa-twitter"></i></li></a>
<a href=""><li><i class="fa fa-facebook"></i></li></a>

The above HTML code contains the problematic section.

htmlcsstwitter-bootstrap

Answer №1

Embed the URL within the <li> tag in this format:

<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-facebook"></i></a></li>

Remember to apply display: inline-block to make them appear side by side.

Answer №2

It is considered invalid HTML to have <a> tags outside of <li> tags.

A better approach would be:

<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>

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

Encountering a Laravel 9 error: TypeError with webpack-cli - compiler.plugin is not a valid function

I recently downloaded a Laravel 9 template and have been attempting to run and utilize it. However, I keep encountering an issue every time I try running npm run dev. The error message that appears is [webpack-cli] TypeError: compiler.plugin is not a fun ...

laraveltwitter-bootstrapnpmwebpacklaravel-9

Angular 2, the change event is not triggering when a bootstrap checkbox is clicked

Encountering an issue, the (change) function is not triggering in a specific checkbox. <input [(ngModel)]="driver.glasses" name="glasses" type="checkbox" class="make-switch" (change)="changeFunction()" data-on-color="primary" data-off-color="info"&g ...

javascripttwitter-bootstrapangulartypescript

Develop a custom Bootstrap layout featuring a responsive design, a sticky footer, and two rows

I am currently working on implementing a new bootstrap "frame" template for my website's layout. While setting up the navbar was relatively easy, I'm encountering some challenges with the footer. The requirements for the footer are as follows: ...

htmlcsstwitter-bootstrapfootersticky

What is the best way to eliminate the border line from a table?

I'm in the process of creating a table and I would like to know how to remove the border line from it. Below is my code snippet: <div id="table"> <table class="table table-bordered"> <thead> <tr> & ...

htmlcss

Troubleshooting problem with accordion card within a JavaScript array

I am currently facing an issue with my list display that fetches data from a database. The problem lies in the accordion feature not functioning properly when integrated into a JavaScript array, yet it works perfectly when directly inserted into HTML code. ...

javascripthtmlcssarraysjson

Extracting specific components from an XML document?

I am relatively new to XML and currently working on handling the following XML file. Is there a way for me to extract specific information from each company? For example, I am interested in only displaying the content of the industry element. <compan ...

javascriptjqueryhtmlxml

Desktop keyboards are essential for inputting data into HTML fields that are not

I'm currently working on developing an on-screen keyboard. My goal is to prevent the mobile device keyboard from opening while the on-screen keyboard is active. One approach is to make the input read-only so that it doesn't open the keyboard when ...

htmlinputkeyboardfocuson-screen-keyboard

Can you explain the distinction between using .classA versus .classB.classA when styling with CSS?

When I use .show instead of .box.show in the CSS, the even boxes do not come from the left side. This discrepancy has left me puzzled as I assumed they would have the same effect. However, it appears that in this particular code snippet, they are behaving ...

javascripthtmlcsscss-selectors

Setting the width of an image within an iframe: A step-by-step guide

Is there a way to adjust the width of an image within an iframe? Typically, if an image with high resolution is placed inside an iframe, the iframe becomes scrollable by default. ...

javascriptjqueryhtmlcss

The session name has not been properly defined

Sorry for any errors in translation. I'm facing an issue where the session name I insert is coming up as undefined. However, when I manually enter the username, everything works fine. View Image <? php session_start (); echo var_dump ($ _SESSION ...

phphtmlajax

Animating object on display and returning it with keyframes

Given the code snippet below: <div class="leftBox"> <div class="mainNode" ></div> </div> <script type="text/javascript"> $('.mainNode').click(function() { var element = $('.mainNode'); if (!ele ...

javascriptcssanimationcss-animationskeyframe

The disablement of the button is a result of concealed select elements

I'm facing an issue with a form that contains three select options: Fit Colour Size By default, the 'Fit' dropdown and 'Colour' dropdown are active with a default value selected (e.g. Regular Fit and Blue Colour). There are mul ...

javascriptjqueryhtmlcss

What is the correct way to incorporate Reveal in a foundation makeup routine?

I've gone through all the steps to make the reveal feature work, including adding modernizr, plugins, and CSS. I've initialized foundation and loaded jQuery correctly. However, I still can't get it to work. What could be missing? <html&g ...

jquerycsszurb-foundation

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

javascripthtmllistsorting

How to bring in external HTML inner content using Javascript AJAX instead of relying on Jquery

Can someone assist me with a coding issue I'm facing? Here is the HTML code snippet: <ul class="menu-list"> <li class="active"><a href="cont1.html" title="Title 1">Link 1</a></li> <li><a href="cont2.html" ti ...

javascripthtmlajaximport

"Utilizing AngulaJS to apply a class to the parent element when a radio button is

I'm wondering how I can assign a class to the parent div of each radio button in a group? You can find the code below and view the corresponding JSFiddle here. Here is the HTML: <div class="bd"> <input type="radio" ng-model="value" val ...

javascripthtmlcssangularjsradio-button

Maintain consistent grid proportions even when content overflows

I came across this issue: https://jsfiddle.net/w19hpqzx/ However, I'm aiming for a layout that resembles this: https://jsfiddle.net/4smwop2u/ Specifically, I'd like the yellow aside portion to stay visible on the screen and for the code block . ...

htmlcsscss-grid

Accessing variables within a frame using JavaScript.Is there a way to access variables within

I am having trouble accessing a Frame that is included within a frameset. The structure looks like this: IFRAME \ FRAMESET \FRAMESET \ FRAME I have been struggling to find a solution, I can only access the iframe ...

pythonhtmlframepamieframeset-iframe

Preventing the page from refreshing when submitting a form

I'm trying to implement a form with a checkbox that functions as a toggle switch. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style ...

javascripthtml

Decorative initials have a tendency to create spaces within the text

I have incorporated Google Fonts into my website, along with Bootstrap. Here is the code I am using: .initial { font-size: 1.5em; font-family: 'Euphoria Script', cursive; } p { font-family: 'Open Sans', sans-serif; } <html> ...

htmlcss