Fixed top navigation bar that remains sticky while keeping the logo at a consistent size

I stumbled upon this code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="row">
    
      <nav class="col-sm-6">
        <span class="pull-left">
          <a href="#" class="navbar-left">
            <img src="img/gyn.png" alt="" class="logo">
          </a>
        </span>
      </nav>

      <nav class="col-sm-6">
        <span class="pull-right">
          <ul class="nav navbar-nav thmbl">
            <li><a  class="tupac" href="#team"><strong>TEAM</strong></a></li>
            <li><a class="tupac" href="#services"><strong>SERVICES</strong></a></li>
            <li><a class="tupac" href="#gal"><strong>GALLERY</strong></a></li>    
            <li><a class="tupac" href="#location"><strong>LOCATION</strong></a></li>
          </ul>
        </span>
      </nav>
      
    </div>
  </div>
</nav>

Can someone help me understand why the logo is appearing oversized and not properly aligned within the Navbar? My goal is to have the logo on the left and the menu items on the right, all on the same line with responsive scaling. Any insights on what I might be missing?

Answer №1

If you're wondering about image resizing in your CSS, make sure that the logo class is set up correctly for it to work. For guidance, you can refer to this example here on how to configure the CSS properly.

Regarding wrapping, by default, the content will wrap especially in a two-column layout on small screens. You can experiment with the CSS (see How to make bootstrap 3 navbar not wrap) or adjust the column sizing to ensure that the logo doesn't take up too much space. For very small screens, consider collapsing the menu to display vertically.

Here's a code snippet from bootply that should help:

<div class="container example2">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
          <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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
        </a>
      </div>
      <div id="navbar2" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

Here's the CSS code snippet:

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

.example2 .navbar-brand>img {
  padding: 7px 15px;
}

.navbar-alignit .navbar-header {
      -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 50px;
}
.navbar-alignit .navbar-brand {
    top: 50%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0,-50%);
    margin-right: 15px;
  margin-left: 15px;
}

.navbar-nav>li>.dropdown-menu {
    z-index: 9999;
}

body {
  font-family: "Lato";
}

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

Learn how to achieve a sleek animation similar to the famous "Ken Burns effect" by utilizing the CSS property "transform" instead of "object-position". Check out the demo to see it in action!

I am currently exploring how to create an animation similar to the "Ken Burns" effect using CSS transform properties. While I have been using object-position to animate, I am facing challenges with the fluidity of the movement. I am seeking help to achiev ...

Ways to correctly import various CSS files for individual routes in a Vuejs application

Currently, I am in the process of developing a project using Vue.js and Laravel. This project will have distinct layouts for the admin/user panel and landing page, requiring different CSS files to be loaded for each route. At the moment, I am utilizing va ...

What is the information stored inside the div element?

How can I extract the contents of a div using bs4? >>> Doc <div class="document"> <p>Text.</p> <p>More text</p> </div> >>> type(Doc) bs4.element.Tag I am looking to retrieve: <p>Text.</p> ...

The customized cursor image fails to load after switching the application URL from http to https

After implementing a redirect from http to https in my application, I encountered an issue with custom cursor images not displaying as intended. Prior to the redirect, the custom cursor images worked fine and were visible on the page. The URL for these cur ...

Tips for showing an Object with nested Objects in Vue.js

Looking for guidance on displaying a JSON object in Vue.js with the following structure: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ & ...

automatically closing bootstrap alerts upon form submission

I'm working on an ajax form that sends data to a database and utilizes bootstrap alerts to notify the user when the process is successful. I want these alerts to automatically close after a certain period of time, consistently. Here's the issue: ...

Internet Explorer seems to be having trouble detecting changes made to a jQuery checkbox

Here is an example of HTML code: <input type="checkbox" id="openInNewWindowCheckBox" value ="some_value" /> Accompanied by a jQuery script: $("#openInNewWindowCheckBox").change(function(){ if($(this).is(':checked')) ...

parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should ...

Utilize external cascading style sheets (CSS) to style XML data loaded into Flash

Trying to incorporate formatted xml into a flash game has been quite challenging for me. Despite my efforts, the css styling doesn't seem to be applied properly. Below is the content of my stylesheet woorden.css: .f {color:red;} This is the str ...

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow fro ...

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

I am attempting to show the email entered in the email input field in a validation message. The input field also checks my database for registered emails and displays a message based on the outcome. I then included this code from a source. What happens is ...

I'm looking for a method to retrieve the value of an option tag and then pass it to a helper within handlebars. Can someone

Currently, I am utilizing express and handlebars in my project. I have a specific view where I aim to display certain information based on the event when a client selects an option from a select tag. However, I have some queries regarding this: Is it fea ...

Setting specific variables in an array with corresponding key-value pairs

I need help with extracting specific columns from a table that has 5 columns. The columns in question are: column1, user_id, column3, column4, and user_exp. Let's say I have the following select query: $mat_sql = mysql_query( "SELECT * FROM users ...

Creating a specific order for Arabic strings in HTML is simple and can be done by utilizing

I need to adjust the ordering of a datetime written in Arabic numbers. I must use an Arabic string and currently have the following C# code written in Arabic: std.InnerText = "17-02-2016"; The current output is in Arabic numerals, displayed as ٢٠١٦- ...

Problem with displaying Django input fieldsSolution for missing Django input

Currently, I am in the process of constructing a website using Django. One of my tasks involves transferring input from index.html to about.html through view.py. However, despite successfully passing the input as seen in the URL in the browser's addre ...

Showcasing an array of images on a Jupyter notebook layout

Looking for some assistance with displaying a dataframe in Jupyter notebook that contains 495 rows of URLs as a grid of images. Here is the first row of the dataframe: id latitude longitude owner title ...

What is the process for opening a local HTML file in IE compatibility mode?

Having issues with IE compatibility mode while opening my HTML file on desktop. In IE8, unable to switch it to compatibility mode as the icon seems to disappear in local HTML documents. Any insights on this? LATEST UPDATE: Tried three solutions but still ...

Switch Out DIV Tag After Clicking It Three Times

I am attempting to replace a specific div element with a different one after it has been clicked on 3 times. This is the sole task I am aiming to achieve through the code. I have searched for code snippets that accomplish this, but all of them immediately ...

Preventing clashes in namespaces while incorporating Bootstrap into a plugin for WordPress

After creating a WordPress plugin, I am considering revamping its layout with the help of bootstrap CSS and js. However, I have encountered issues in the past due to conflicting CSS naming conventions. I want to ensure that there are no namespace conflicts ...