The bottom of the page showcases the menu element

I have been utilizing Bootstrap to display a navigation bar: https://i.sstatic.net/P9maf.png

In the provided screenshot, you can observe that the first menu item is positioned at the lower level compared to the rest of the menu elements.

Below are the CSS and HTML codes:

CSS

  
     <style>
      body {
        font-family: 'Roboto', serif;
        font-size: 16px;
      }
      #portada {
    background-color: #F1F7F8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #4496B0;  
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; 
background-color: #4496B0;
}
  .navbar-default {
    background-color: #94C3D2;
    border-color: #4496B0;
}
  .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
    color: #262626;
   text-decoration: none;
  background-color: #66CCFF;  
   }
 .nav > li > a:hover,
 .nav > li > a:focus {
    text-decoration: none;
    background-color: silver; 
  }
  .navbar-default .navbar-nav > li > a {
   color: white; 
    }
    .navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 68px;
padding: 7px 15px;
  width: 180px;
}
    </style>

HTML

   
    <div class="bs-example">
    <nav role="navigation" class="navbar navbar-default">
        <div class="navbar-header navbar-brand">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <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="index.html"><img src="imagenes/logo_pleca.png" alt="Vico">
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li ><a href="index.html">Inicio</a></li>
                <li class="active"><a href="doctores.html">Doctores</a></li>
                <li><a href="#">Hospitales</a></li>
                <li><a href="#">Farmacias</a></li>
                <li><a href="#">Laboratorios</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contactar</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>

I have been unable to resolve this issue.

Answer №1

End of </a> image

 <div class="bs-example">
    <nav role="navigation" class="navbar navbar-default">
        <div class="navbar-header navbar-brand">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <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="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Inicio</a></li>
                <li class="active"><a href="doctores.html">Doctores</a></li>
                <li><a href="#">Hospitales</a></li>
                <li><a href="#">Farmacias</a></li>
                <li><a href="#">Laboratorios</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contactar</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>

Answer №2

Take a look at this fiddle Fiddle

Make sure to check for these missing tags in the HTML code:

<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header navbar-brand">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <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="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Inicio</a></li>
            <li><a href="doctores.html">Doctores</a></li>
            <li><a href="#">Hospitales</a></li>
            <li><a href="#">Farmacias</a></li>
            <li><a href="#">Laboratorios</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Contactar</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
    </div>
</nav>
</div>

Answer №3

The issue lies with the code snippet below, where there is a missing closing anchor tag causing the layout to display improperly:

<a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico">

The correct structure should be:

<a class="navbar-brand" href="index.html">
   <img src="imagenes/logo_pleca.png" alt="Vico">
</a>
</div>

For a live demo, you can visit: https://jsfiddle.net/yn2xeq6z/

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

What is the method in PHP to send an HTML file along with a value in response to a POST request?

I have a PHP file where I want to include a dropdown list and submit button. The dropdown list should display filenames for the user to choose from. Once the user selects a filename from the dropdown list and clicks the submit button, the PHP file should r ...

Switch up the picture when you press on it

I have a task involving a table where I want to switch out an image in the <td> when it is clicked, using a URL that I specify beforehand. The URL of the image will be provided when clicking on a link within the page. For example: index.html?type=d ...

Aligning buttons in an inline form with Bootstrap

Issue with Button Alignment Post Validation. <form class="form-inline form-padding"> <div class="form-group"> <div class="input-group"> <input class="form-control" placeholder="First Name" name="fir ...

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown. mypython.py @app.route('/new_data', methods = ['POST', 'GET']) def new_data(): #Filter data and return the data(data_lis ...

Leveraging the power of the jQuery load function alongside HTML forms in web

Currently in the process of creating a fresh website and considering implementing jQuery's load() function to bring content from various html pages into my main page. load() is functioning smoothly. Below is my current code: Main.html page where cont ...

What is the process for removing a full row from a table in PHP?

Is there a way to add a delete button to delete an entire row in a MySQL database? Below you can find the code and instructions on how to delete a row using the ID, which is the primary key. <?php mysql_connect('localhost', 'off', ...

A guide on monitoring SASS files in all subdirectories with an npm script

Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...

Troubles with aligning a figure in Bootstrap 4

I am in the process of updating my website layout from an old version marked by Old HTML, which can be found at JFiddle: https://jsfiddle.net/LybeppL3/11/ The new version I am working on, known as Current Code: https://jsfiddle.net/5c2sm9s1/23/ OR at Pree ...

Confirm that only the days of the present month are eligible for selection

I have been given the responsibility of validating a date field that is populated when an invoice is created. The date field consists of a text box and three button objects allowing users to select a date from a calendar, input today's date, or remove ...

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last ...

The process of updating a session using jQuery

Whenever a checkbox is selected, the session gets populated with an id. However, if another checkbox is selected afterwards, the session remains unchanged. This is my current code structure: <input type='checkbox' class='imei' id=&a ...

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

Is it possible to insert both the name and value of a complete attribute within an element using a string in Razor?

There is a common way to achieve this in asp.net MVC Razor Engine: @{ string myValue = "foo" } <h1 hello='@myValue'></h1> However, I am interested in an alternative approach that might result in an error: @{ string myAttri ...

What is the best way to incorporate a custom margin within a grid system while ensuring it remains responsive?

I'm currently working on incorporating 4 non-bootstrap "cards" into my HTML layout, with some space between them. Here is an image depicting how it's supposed to look: https://i.sstatic.net/bppvW.png The problem arises when I attempt to make the ...

Customize the color of arrows within an ng-bootstrap carousel

I am currently working on a carousel using ng-bootstrap, and I need to change the color or image of the arrows from white to black because my background images are white and not visible. The issue is that I am having trouble accessing span, and I am unsure ...

Header and footer that remain in place while the content scrolls smoothly

I'm currently working on designing a webpage that includes three separate divs: a header, a footer, and a content area. These divs are intended to fill up the entire screen space available. The header and footer remain consistent in size and structur ...

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

Creating a unique box design with HTML and CSS

Looking to create a design layout using HTML & CSS similar to the one shown in the screenshot below. While I've made progress up to this point, I am wondering if there is a way to adjust the elements as indicated by the red lines in the screenshot ...

Using Javascript to dynamically add rows to a table, however they mysteriously appear and disappear soon

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserPermisson.aspx.cs" Inherits="TestProjects.UserPermisson" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ...

The navbar at the top of the page remains in place and obscures

I am facing an issue where my fixed navbar code breaks up into individual boxes for the links when I try to scroll, covering the page title. How can I resolve this? My code is too long to post directly here, so it's available on pastebin at the follow ...