Bootstrap mobile menu logo design

Currently, I am working on a bootstrap template where I have created a div class containing a logo. However, I have noticed that when I resize the Chrome window, the logo overlaps with the mobile menu.

Here is the mobile version of my site:

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

*This is the desired appearance of the mobile version of my site**

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

Below is the code I am using:

<div class="logo">
  <img src="img/bulls-logo.png" class="img-responsive" width="500px" height="100px">
  </div>


  <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="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></a></li>
...
...
</ul>
    </div>
  </div>
</nav>

For the CSS part:

.logo
{background-color: #FFF;
height: auto;
width: 100%;
padding-bottom: 10px;}


.navbar
{margin-bottom:0px !important;
font-size: 12px;
: #000;}

htmlcsstwitter-bootstraptoggle

Answer №1

For your logo to appear within your navbar, you need to insert your logo into the HTML code of the navbar.

Try adding this line to your navbar header (and update the image path):

<a href="#" class="navbar-left hidden-md hidden-lg hidden-sm"><img src="path/to/your/image.jpg"></a>

Also, add some classes to your additional logo div:

<div class="logo">
  <img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>

UPDATED example :

  <div class="logo">
    <img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
  </div>

  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a href="#" class="navbar-left hidden-md hidden-lg hidden-sm"><img src="path/to/your/image.jpg"></a>
      <button type="button" class="navbar-toggle collapsed navbar-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users" aria-hidden="true"></i> ATHLETES<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
       <!-- more navbar items -->

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

Answer №2

Not sure when the mobile view will appear, so you'll need to adjust the pixels. In my case, the view is triggered when the width is less than 720px.

@media (max-width: 720px) {
 .logo{
   width: 50%;
   float: left;
 }  

 .logo img{
   width: 100%;
   float: none;
  }
}

Don't forget to add the following code in the head section of your html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Creating a single row with five columns using HTML and CSS

I'm currently working on setting up a layout consisting of 1 row and 5 columns placed side by side. These columns are going to showcase the projects that I intend to feature on my online Portfolio. To achieve this layout, I am utilizing the Bootstrap ...

htmlcssbootstrap-4multiple-columns

Tips on implementing a circular progress bar with locomotive scroll functionality

Can anyone help me integrate progress functionality with Locomotive Scroll using JavaScript? Link to CodePen for reference Check out this code snippet from Locomotive Scroll that calculates the percentage of pages scrolled: const scroller = new Locomotiv ...

javascripthtmlcss

Uncovering website content with Selenium: unlocking the mysterious origins of the text

Currently, I am utilizing Selenium and Python to scrape a website. My goal is to extract specific text from a particular page. Despite successfully navigating to the desired page, every attempt at using methods such as driver.find_elements_by_id(), driver. ...

pythonhtmlseleniumweb-scraping

CSS styling for the dropdown list in the content/option section

Can someone help me with a simple question I've been researching for hours without success? I'm trying to figure out how to style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this screenshot ...

htmlcssdrop-down-menu

Vue.Js allows developers to easily set a default selected value in a select dropdown menu

Having trouble with getting the default selected value using select in VueJs. I've attempted two different approaches: Using id and v-model fields in the select like this: <select v-model="sort_brand" id="sort-brand" class="form-control"> ...

htmlselectvue.jshtml-select

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Exploring the possibilities of creating a web application, I stumbled upon AngularJS. With plans to incorporate WCF Service and SQL Server into my project, I am intrigued by what these technologies can offer. I want to ensure that AngularJS aligns with my ...

javascriptjqueryhtmlwcfangularjs

Add CSS styling to an ASP.Net webpage that utilizes the default master page

I have developed a new ASP.Net Web Application and inserted the following div in the Default.aspx file: <div id="TestDiv"> Hi, This is CSS test. </div> To style the above div, I included the following CSS in the Site.css file: #TestDiv{ colo ...

cssmaster-pages

There seems to be a disconnect between the CSS and HTML files

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="c ...

htmlcss

What is the best method for adjusting height in MaterialUI components?

Is there a way to remove this white line from the image?view image here When I set the height to 100%, it appears like this:view image here ...

cssreactjsmaterial-uiheight

Using HTML5 Canvas to draw intersecting polygons

Recently, I came across a polygon drawing function that caught my attention: Polygon.prototype.draw = function(ctx) { ctx.save(); ctx.beginPath(); var v = this.vertices[0] ctx.moveTo(this.position.x + v.x, this.position.y + v.y); var i ...

javascripthtmlcanvasdrawingrendering

Customize the color of Bootstrap active tabs to have a unique and distinct hue for each tab

I have successfully managed to change the color of both active and non-active tabs as a group, but I am wondering if it is possible for the color to remain the same when moving to the next tab. Here is what I've tried: http://jsfiddle.net/pThn6/2031/ ...

jqueryhtmlcsstwitter-bootstraptabs

Leveraging basscss through NPM/Webpack installation

As a newcomer to the webpack/react app environment, I am attempting to incorporate the Basscss CSS framework into my project. After successfully running 'npm i basscss' and adding require('basscss/css/basscss.css'); to my app entry poin ...

cssnpmwebpack

Contrasting Firefox Experience on Mac and Windows

I'm experiencing some issues with a website that is displaying differently in Firefox on Windows compared to Mac. I did some research online to see if there are any known differences in CSS rendering between the two versions of Firefox, but it doesn&a ...

cssfirefoxrendering

Tips for maintaining pagination state in datatable when making ajax calls

Summary of my question How can I keep the datatable on the same page after updating a row using ajax in my unique way? Challenges I'm facing When a user clicks a button in the table to update a specific row and I call the fn_GetData() function. Af ...

javascriptjqueryhtmldatatables

The concept of nested labels: defining conditions for displaying specific sections of a label

Let's say I have a label that contains the following text: <label>This is a text. This is another text.</label> Is there a way to indicate that the second sentence should only be visible when a boolean value is true? For example: <la ...

htmlangularjs

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

css

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

Having trouble loading Three.js in JavaScript file using npm install?

I am encountering a problem when trying to include Three.js in my JavaScript file without using the HTML script element. The error message I receive is "Uncaught SyntaxError: Cannot use import statement outside a module". Although my Three.js code runs suc ...

javascripthtmlimportthree.js

When an absolute positioned element exceeds the right border of its relative parent, its width will be truncated

When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain. However, if one of these divs extends beyond the right border of the relative parent, ...

htmlcsscss-position

Legend alignment issue in Firefox disrupting Flexbox functionality

My fieldset has a legend containing text and a button. I am attempting to use flexbox to right-align the button within the legend. This setup works correctly in Chrome, but encounters issues in Firefox. I have managed to replicate the problem with a simpl ...

htmlcssflexbox