Mobile Bootstrap 4 experiencing logo display issue

My .navbar logo disappears when the screen width is under 768px. I've seen a similar post about this issue, but they had set a very high height. I haven't specified a height for my navbar or navbar brand. Any help would be greatly appreciated, thanks.

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

.navbar>.container,
.navbar>.container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1.5rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}
<nav class="navbar navbar-expand-md bg-dark navbar-dark" style="background-image: url(http://go.pardot.com/l/679853/2019-01-07/2cz/679853/633/events_hero_1_smaller.png);background-position: top left;background-size: 100%;background-repeat: repeat;">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbar19">
      <span class="navbar-brand d-md-block">
          <img src="https://www.merceradvisors.com/wp-content/uploads/2019/01/Mercer_Advisors_Logo_white.svg" width="100" height="100" class="d-inline-block align-top" alt="">
      </span>
    </div>
  </div>
  <span class="navbar-text text-light w-50 mr-auto" style="">
  <img src="https://jq92i2jx71t1ha9ez393dz6k-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/Kristen.png" width="40" height="40" class="d-inline-block align-top rounded-circle mr-2" alt="" style="border: 2px solid #49dbc3 ;border-color: #49dbc3;  ">
   <span>
     <b class="" style="vertical-align: middle align-items:center; line-height:30px;">
        <a href="tel:888.565.1681">CALL US NOW: 888.565.1681</a>
     </b>
   </span>
  </span>
</nav>

cssbootstrap-4

Answer №1

Upon closer inspection, it appears that Bootstrap is not included in your snippet, which means that the code issue may not be visible to others.

After integrating Bootstrap, I noticed that the logo is placed inside the navbar-collapse container. This element gets hidden when the screen reaches a certain breakpoint and can only be expanded with a button. To resolve this, you can either remove the logo from this container or set the navbar to always expand by using the class navbar-expand without specifying any breakpoints.

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

.navbar>.container,
.navbar>.container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1.5rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand bg-dark navbar-dark" style="background-image: url(http://go.pardot.com/l/679853/2019-01-07/2cz/679853/633/events_hero_1_smaller.png);background-position: top left;background-size: 100%;background-repeat: repeat;">
  <div class="container">
    <span class="navbar-brand d-md-block">
          <img src="https://www.merceradvisors.com/wp-content/uploads/2019/01/Mercer_Advisors_Logo_white.svg" width="100" height="100" alt="">
      </span>
  </div>
  <span class="navbar-text text-light w-50 mr-auto" style="">
  <img src="https://jq92i2jx71t1ha9ez393dz6k-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/Kristen.png" width="40" height="40" class="d-inline-block align-top rounded-circle mr-2" alt="" style="border: 2px solid #49dbc3 ;border-color: #49dbc3;  ">
   <span>
     <b class="" style="vertical-align: middle align-items:center; line-height:30px;">
        <a href="tel:888.565.1681">CALL US NOW: 888.565.1681</a>
     </b>
   </span>
  </span>
</nav>

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 process for choosing the 1st, 4th, 7th element, and beyond?

Is there a way to choose the 1st, 4th, 7th elements and so on? Also, how can I select the 3rd, 6th, 9th, and beyond? The method involves selecting an element then skipping two before selecting the third one. I believe the :nth-child selector is the key bu ...

csscss-selectors

Creating a cutoff with CSS: A step-by-step guide

Is there a way to create something similar using only CSS? https://i.stack.imgur.com/N9c6W.png I have no clue on how to achieve this. Any assistance would be greatly appreciated. ...

css

Utilizing PNG images with color in CSS, HTML, or JavaScript

On my website, I have an image in PNG format. I am wondering if there is a way to change the color of the image using HTML5, JavaScript, or CSS. Ideally, I would like the image to be changed to white by inverting its colors (changing black to white, not al ...

javascripthtmlcssimagepng

Consistently maintaining a uniform distance between icons and the border box is essential

I am working on a team overview for a company where data such as name, job title, and information are fetched from the database. Due to varying lengths of information, the icons are not aligning properly in one line. https://i.sstatic.net/cEmKj.png Does ...

htmlcsssass

Issue with sliding panel not working smoothly in Internet Explorer

Is there a way to remove the added margin when opening the info slide panel? The issue seems to only occur in IE (using the IE tab plugin for Firefox) and in IE7 and IE8, the tooltip does not display. Thank you for any assistance. Site Link ...

jquerycssinternet-explorer

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

Transform the functionality of DIV and UL to mimic that of a SELECT element

I am attempting to update the text of the <span class="hideSelect"> element to match the text of the selected <li>, so that it functions like a <select> element. CSS: .myDrop { border: 1px solid #ddd; border-radius: 3px; padding: ...

jqueryhtmlcss

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

htmlcss

Effortlessly switching classes in JavaScript for seamless transitions

I'm currently working on an animation project where I want the title to be visible on the page initially, and then slowly fade away as you scroll down, with a subtitle fading in right after. While I've managed to get the title part working, I&apo ...

javascripthtmlcss

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

javascriptcssreactjsmaterial-ui

The elements within the HTML, CSS, and Bootstrap are all clashing and

Website Output https://i.sstatic.net/5JVyg.jpg I've been working on a small website with a bootstrap carousel, and in this specific section of the program, the Bootstrap and HTML/CSS elements overlap by default. I'm not sure how to separate the ...

htmlcssbootstrap-4carousel

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

htmlcss

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

javascriptjqueryhtmlcss

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

css

Ways to enlarge the font size of a hyperlink

I am just starting out with coding and I need to figure out how to increase the font size of my link. <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: #FFFFFF; } /* visited link */ a:visited { color: #FF ...

htmlcss

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

Is there a way to automatically animate an element each time it moves to a different position on the screen?

I am working on a Vue project and facing an issue where elements disappear on the page due to the use of v-if, causing the rest of the page to rearrange abruptly. I am looking for a way to make these changes happen smoothly. Each element on the page has a ...

cssvue.jsanimationcss-animationscss-transitions

Tips for achieving a background animation similar to the one shown on this page

Check out this link: danielcoding.me/resume/#contact I am interested in this animation: screenshot I tried inspecting element on the page, but couldn't find any background images. How can I create this animation? Is it achieved through JavaScript or ...

javascripthtmlcss

What is the best way to create a sticky menu bar?

I have this code snippet at the beginning of my website: <body> <div class="agile-main"> <div class="menu-wrap" id="style-1"> <nav class="top-nav"> <ul class="icon-list"> ...

jqueryhtmlcssmenu

CSS: Contain text within a div to dynamically adjust the div's length based on the text content

Check out this code snippet: View the Fiddle <div id="main" style="border:1px solid red;"> <div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin ...

htmlcssmarginpadding