Logo in Bootstrap NavBar shifts hamburger to the left when browser is small

I was trying something today. In a Bootstrap NavBar, if the logo (navbar-brand) is text only then the hamburger stays on the right. But if the logo is an image, the hamburger shifts to the left when you resize the browser. I can't figure this out.

I'm currently working on Angela Yu's Udemy course and completed the Bootstrap module. Now trying to use what I learned to re-create my own website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="#">

        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

enter image description here

edited Jan 20 at 1:54

Arleigh Hix

924412

asked Jan 19 at 23:49

Sean

add a comment |

I'm currently working on Angela Yu's Udemy course and completed the Bootstrap module. Now trying to use what I learned to re-create my own website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="#">

        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

enter image description here

edited Jan 20 at 1:54

Arleigh Hix

924412

asked Jan 19 at 23:49

Sean

add a comment |

I'm currently working on Angela Yu's Udemy course and completed the Bootstrap module. Now trying to use what I learned to re-create my own website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="#">

        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

enter image description here

edited Jan 20 at 1:54

Arleigh Hix

924412

asked Jan 19 at 23:49

Sean

I'm currently working on Angela Yu's Udemy course and completed the Bootstrap module. Now trying to use what I learned to re-create my own website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="#">

        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

enter image description here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="#">

        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="#">

        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

css bootstrap-4

edited Jan 20 at 1:54

Arleigh Hix

924412

asked Jan 19 at 23:49

Sean

edited Jan 20 at 1:54

Arleigh Hix

924412

asked Jan 19 at 23:49

Sean

edited Jan 20 at 1:54

Arleigh Hix

924412

edited Jan 20 at 1:54

Arleigh Hix

924412

edited Jan 20 at 1:54

Arleigh Hix

924412

asked Jan 19 at 23:49

Sean

asked Jan 19 at 23:49

Sean

asked Jan 19 at 23:49

Sean

add a comment |

2 Answers
2

active

oldest

votes

Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

From w3schools

The flex-wrap property specifies whether the flexible items should
wrap or not.

Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:

enter image description here

Use width: 30% on .navbar-brand instead and set width: 100% to logo image.

I updated your code, please check:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

edited Jan 22 at 8:31

answered Jan 22 at 8:10

Α. Papadakis

424413

Oh awesome! Thank you so much for your help!

– Sean
Jan 22 at 20:20

Your welcome! If this solves your problem please feel free to accept the answer.

– Α. Papadakis
Jan 22 at 20:58

Oh sorry about that. I didn't know I needed to do that. Ok, I'll do it now.

– Sean
Jan 24 at 4:03

add a comment |

The toggler is simply getting wrapped to the next line, based on the width of .navbar-brand and this is expected behavior for it to then be left-aligned. If you want the toggler to always be right-aligned, adding the class ml-auto appears to work.

<button class="navbar-toggler ml-auto" ...

See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins

answered Jan 20 at 1:02

Arleigh Hix

924412

I would love to agree, but it doesn't. First, I don't want the toggler to wrap it to the next line. That is unexpected behavior. Second, it doesn't work. With a text only logo it works as expected. But with an image logo, the hamburger shifts to the left (or bottom depending on how you look at it).

– Sean
Jan 20 at 7:22

What browser are you using? at what screen width? Can you edit the image src attribute in your snippet to be an absolute URL?

– Arleigh Hix
Jan 20 at 7:46

The behavior may be unexpected by you but in the examples on the bootstrap site they do in fact wrap when the screen is too narrow, and once wrapped they are left aligned. So you should expect your code to behave in the same manor without further modification.

– Arleigh Hix
Jan 20 at 7:55

Sorry, I worded it wrong. I mean, I would think (my expectation) that the hamburger should stay to the right by default whether it's an image or an anchor element. Both are inline elements so I would think they should behave the same? Or maybe I'm just not understanding this completely.

– Sean
Jan 21 at 1:46

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54272354%2flogo-in-bootstrap-navbar-shifts-hamburger-to-the-left-when-browser-is-small%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

From w3schools

The flex-wrap property specifies whether the flexible items should
wrap or not.

Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:

enter image description here

Use width: 30% on .navbar-brand instead and set width: 100% to logo image.

I updated your code, please check:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

edited Jan 22 at 8:31

answered Jan 22 at 8:10

Α. Papadakis

424413

Oh awesome! Thank you so much for your help!

– Sean
Jan 22 at 20:20

Your welcome! If this solves your problem please feel free to accept the answer.

– Α. Papadakis
Jan 22 at 20:58

Oh sorry about that. I didn't know I needed to do that. Ok, I'll do it now.

– Sean
Jan 24 at 4:03

add a comment |

Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

From w3schools

The flex-wrap property specifies whether the flexible items should
wrap or not.

Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:

enter image description here

Use width: 30% on .navbar-brand instead and set width: 100% to logo image.

I updated your code, please check:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

edited Jan 22 at 8:31

answered Jan 22 at 8:10

Α. Papadakis

424413

Oh awesome! Thank you so much for your help!

– Sean
Jan 22 at 20:20

Your welcome! If this solves your problem please feel free to accept the answer.

– Α. Papadakis
Jan 22 at 20:58

Oh sorry about that. I didn't know I needed to do that. Ok, I'll do it now.

– Sean
Jan 24 at 4:03

add a comment |

Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

From w3schools

The flex-wrap property specifies whether the flexible items should
wrap or not.

Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:

enter image description here

Use width: 30% on .navbar-brand instead and set width: 100% to logo image.

I updated your code, please check:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

edited Jan 22 at 8:31

answered Jan 22 at 8:10

Α. Papadakis

424413

Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

From w3schools

The flex-wrap property specifies whether the flexible items should
wrap or not.

Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:

enter image description here

Use width: 30% on .navbar-brand instead and set width: 100% to logo image.

I updated your code, please check:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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



<section id="title">

  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

      <a class="navbar-brand" href="#" style="width: 30%;">

        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />

      </a>

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>



      <div class="collapse navbar-collapse id=" navbarSupportedContent>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">Home</li>

        </ul>

      </div>

    </nav>

  </div>

</section>

edited Jan 22 at 8:31

answered Jan 22 at 8:10

Α. Papadakis

424413

edited Jan 22 at 8:31

answered Jan 22 at 8:10

Α. Papadakis

424413

answered Jan 22 at 8:10

Α. Papadakis

424413

answered Jan 22 at 8:10

Α. Papadakis

424413

Oh awesome! Thank you so much for your help!

– Sean
Jan 22 at 20:20

Your welcome! If this solves your problem please feel free to accept the answer.

– Α. Papadakis
Jan 22 at 20:58

Oh sorry about that. I didn't know I needed to do that. Ok, I'll do it now.

– Sean
Jan 24 at 4:03

add a comment |

Oh awesome! Thank you so much for your help!

– Sean
Jan 22 at 20:20

Your welcome! If this solves your problem please feel free to accept the answer.

– Α. Papadakis
Jan 22 at 20:58

Oh sorry about that. I didn't know I needed to do that. Ok, I'll do it now.

– Sean
Jan 24 at 4:03

Oh awesome! Thank you so much for your help!

– Sean
Jan 22 at 20:20

Your welcome! If this solves your problem please feel free to accept the answer.

– Α. Papadakis
Jan 22 at 20:58

Oh sorry about that. I didn't know I needed to do that. Ok, I'll do it now.

– Sean
Jan 24 at 4:03

add a comment |

<button class="navbar-toggler ml-auto" ...

See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins

answered Jan 20 at 1:02

Arleigh Hix

924412

I would love to agree, but it doesn't. First, I don't want the toggler to wrap it to the next line. That is unexpected behavior. Second, it doesn't work. With a text only logo it works as expected. But with an image logo, the hamburger shifts to the left (or bottom depending on how you look at it).

– Sean
Jan 20 at 7:22

What browser are you using? at what screen width? Can you edit the image src attribute in your snippet to be an absolute URL?

– Arleigh Hix
Jan 20 at 7:46

The behavior may be unexpected by you but in the examples on the bootstrap site they do in fact wrap when the screen is too narrow, and once wrapped they are left aligned. So you should expect your code to behave in the same manor without further modification.

– Arleigh Hix
Jan 20 at 7:55

Sorry, I worded it wrong. I mean, I would think (my expectation) that the hamburger should stay to the right by default whether it's an image or an anchor element. Both are inline elements so I would think they should behave the same? Or maybe I'm just not understanding this completely.

– Sean
Jan 21 at 1:46

add a comment |

<button class="navbar-toggler ml-auto" ...

See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins

answered Jan 20 at 1:02

Arleigh Hix

924412

I would love to agree, but it doesn't. First, I don't want the toggler to wrap it to the next line. That is unexpected behavior. Second, it doesn't work. With a text only logo it works as expected. But with an image logo, the hamburger shifts to the left (or bottom depending on how you look at it).

– Sean
Jan 20 at 7:22

What browser are you using? at what screen width? Can you edit the image src attribute in your snippet to be an absolute URL?

– Arleigh Hix
Jan 20 at 7:46

The behavior may be unexpected by you but in the examples on the bootstrap site they do in fact wrap when the screen is too narrow, and once wrapped they are left aligned. So you should expect your code to behave in the same manor without further modification.

– Arleigh Hix
Jan 20 at 7:55

Sorry, I worded it wrong. I mean, I would think (my expectation) that the hamburger should stay to the right by default whether it's an image or an anchor element. Both are inline elements so I would think they should behave the same? Or maybe I'm just not understanding this completely.

– Sean
Jan 21 at 1:46

add a comment |

<button class="navbar-toggler ml-auto" ...

See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins

answered Jan 20 at 1:02

Arleigh Hix

924412

<button class="navbar-toggler ml-auto" ...

See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins

answered Jan 20 at 1:02

Arleigh Hix

924412

answered Jan 20 at 1:02

Arleigh Hix

924412

answered Jan 20 at 1:02

Arleigh Hix

924412

answered Jan 20 at 1:02

Arleigh Hix

924412

I would love to agree, but it doesn't. First, I don't want the toggler to wrap it to the next line. That is unexpected behavior. Second, it doesn't work. With a text only logo it works as expected. But with an image logo, the hamburger shifts to the left (or bottom depending on how you look at it).

– Sean
Jan 20 at 7:22

What browser are you using? at what screen width? Can you edit the image src attribute in your snippet to be an absolute URL?

– Arleigh Hix
Jan 20 at 7:46

The behavior may be unexpected by you but in the examples on the bootstrap site they do in fact wrap when the screen is too narrow, and once wrapped they are left aligned. So you should expect your code to behave in the same manor without further modification.

– Arleigh Hix
Jan 20 at 7:55

Sorry, I worded it wrong. I mean, I would think (my expectation) that the hamburger should stay to the right by default whether it's an image or an anchor element. Both are inline elements so I would think they should behave the same? Or maybe I'm just not understanding this completely.

– Sean
Jan 21 at 1:46

add a comment |

I would love to agree, but it doesn't. First, I don't want the toggler to wrap it to the next line. That is unexpected behavior. Second, it doesn't work. With a text only logo it works as expected. But with an image logo, the hamburger shifts to the left (or bottom depending on how you look at it).

– Sean
Jan 20 at 7:22

What browser are you using? at what screen width? Can you edit the image src attribute in your snippet to be an absolute URL?

– Arleigh Hix
Jan 20 at 7:46

The behavior may be unexpected by you but in the examples on the bootstrap site they do in fact wrap when the screen is too narrow, and once wrapped they are left aligned. So you should expect your code to behave in the same manor without further modification.

– Arleigh Hix
Jan 20 at 7:55

Sorry, I worded it wrong. I mean, I would think (my expectation) that the hamburger should stay to the right by default whether it's an image or an anchor element. Both are inline elements so I would think they should behave the same? Or maybe I'm just not understanding this completely.

– Sean
Jan 21 at 1:46

I would love to agree, but it doesn't. First, I don't want the toggler to wrap it to the next line. That is unexpected behavior. Second, it doesn't work. With a text only logo it works as expected. But with an image logo, the hamburger shifts to the left (or bottom depending on how you look at it).

– Sean
Jan 20 at 7:22

What browser are you using? at what screen width? Can you edit the image src attribute in your snippet to be an absolute URL?

– Arleigh Hix
Jan 20 at 7:46

The behavior may be unexpected by you but in the examples on the bootstrap site they do in fact wrap when the screen is too narrow, and once wrapped they are left aligned. So you should expect your code to behave in the same manor without further modification.

– Arleigh Hix
Jan 20 at 7:55

Sorry, I worded it wrong. I mean, I would think (my expectation) that the hamburger should stay to the right by default whether it's an image or an anchor element. Both are inline elements so I would think they should behave the same? Or maybe I'm just not understanding this completely.

– Sean
Jan 21 at 1:46

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku