Bootstrap Navbar wrapping to second line

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I am working on a nav bar with Bootstrap and my condensed menu always is wrapping to a new line, even when there should be space on the line above. This started occurring when added the logo (in place of the red block).

Logo with navbar wrapping

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

What would be causing this?

edited Nov 23 '18 at 21:15

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

I edited your question adding a snippet using your code and it does not happen what you describe in your question, can you add a functional example that reflects your problem?

– Yandy_Viera
Nov 23 '18 at 21:13

@Yandy_Viera I added a legitimate image so it now shows the issue

– Sara Tibbetts
Nov 23 '18 at 21:16

add a comment |

Logo with navbar wrapping

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

What would be causing this?

edited Nov 23 '18 at 21:15

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

I edited your question adding a snippet using your code and it does not happen what you describe in your question, can you add a functional example that reflects your problem?

– Yandy_Viera
Nov 23 '18 at 21:13

@Yandy_Viera I added a legitimate image so it now shows the issue

– Sara Tibbetts
Nov 23 '18 at 21:16

add a comment |

Logo with navbar wrapping

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

What would be causing this?

edited Nov 23 '18 at 21:15

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

Logo with navbar wrapping

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

What would be causing this?

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

html css twitter-bootstrap navbar

edited Nov 23 '18 at 21:15

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

edited Nov 23 '18 at 21:15

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

edited Nov 23 '18 at 21:15

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

asked Nov 23 '18 at 21:02

Sara Tibbetts

2,20742444

I edited your question adding a snippet using your code and it does not happen what you describe in your question, can you add a functional example that reflects your problem?

– Yandy_Viera
Nov 23 '18 at 21:13

@Yandy_Viera I added a legitimate image so it now shows the issue

– Sara Tibbetts
Nov 23 '18 at 21:16

add a comment |

I edited your question adding a snippet using your code and it does not happen what you describe in your question, can you add a functional example that reflects your problem?

– Yandy_Viera
Nov 23 '18 at 21:13

@Yandy_Viera I added a legitimate image so it now shows the issue

– Sara Tibbetts
Nov 23 '18 at 21:16

I edited your question adding a snippet using your code and it does not happen what you describe in your question, can you add a functional example that reflects your problem?

– Yandy_Viera
Nov 23 '18 at 21:13

@Yandy_Viera I added a legitimate image so it now shows the issue

– Sara Tibbetts
Nov 23 '18 at 21:16

add a comment |

1 Answer
1

active

oldest

votes

It seems that there is a problem with setting the width of the img .logo-scrollbar in percent inside the a .navbar-brand to fix it you have 3 options

1- Overwrite the display of .navbar-brand to display: contents;

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

2- Set the width of .logo-scrollbar in px

3- Set the width: 30%; to .navbar-brand and width:100% to .logo-scrollbar

edited Nov 23 '18 at 21:50

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

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%2f53452916%2fbootstrap-navbar-wrapping-to-second-line%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

It seems that there is a problem with setting the width of the img .logo-scrollbar in percent inside the a .navbar-brand to fix it you have 3 options

1- Overwrite the display of .navbar-brand to display: contents;

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

2- Set the width of .logo-scrollbar in px

3- Set the width: 30%; to .navbar-brand and width:100% to .logo-scrollbar

edited Nov 23 '18 at 21:50

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

add a comment |

It seems that there is a problem with setting the width of the img .logo-scrollbar in percent inside the a .navbar-brand to fix it you have 3 options

1- Overwrite the display of .navbar-brand to display: contents;

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

2- Set the width of .logo-scrollbar in px

3- Set the width: 30%; to .navbar-brand and width:100% to .logo-scrollbar

edited Nov 23 '18 at 21:50

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

add a comment |

It seems that there is a problem with setting the width of the img .logo-scrollbar in percent inside the a .navbar-brand to fix it you have 3 options

1- Overwrite the display of .navbar-brand to display: contents;

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

2- Set the width of .logo-scrollbar in px

3- Set the width: 30%; to .navbar-brand and width:100% to .logo-scrollbar

edited Nov 23 '18 at 21:50

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

It seems that there is a problem with setting the width of the img .logo-scrollbar in percent inside the a .navbar-brand to fix it you have 3 options

1- Overwrite the display of .navbar-brand to display: contents;

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

2- Set the width of .logo-scrollbar in px

3- Set the width: 30%; to .navbar-brand and width:100% to .logo-scrollbar

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

.logo-scrollbar {

  width: 30%;  

}



#mainNav {

  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #fff;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



#mainNav .navbar-brand {

  font-weight: 700;

  text-transform: uppercase;

  color: #12AEA1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  display: contents;       /* add this */

}







#mainNav .navbar-nav > li.nav-item > a.nav-link,

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {

  font-size: .9rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #212529;

}







@media (min-width: 992px) {



  #mainNav .navbar-nav > li.nav-item > a.nav-link {

    padding: 0.5rem 1rem;

  }



  #mainNav.navbar-shrink {

    border-bottom: 1px solid rgba(33, 37, 41, 0.1);

    background-color: #fff;

  }





}

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

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">

        <a class="navbar-brand js-scroll-trigger" href="#page-top">

            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">

        </a>

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

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

        </button>

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

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

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#about">About</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#services">Services</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#team">Team</a>

            </li>

            <li class="nav-item">

                <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

            </li>

        </ul>

    </div>

</div>

edited Nov 23 '18 at 21:50

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

edited Nov 23 '18 at 21:50

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

answered Nov 23 '18 at 21:38

Yandy_Viera

3,50531238

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

搜尋此網誌

Wsrtjtyk