Anchor tag in navbar takes whole row - angular

Question

I am trying to make a topbar and a sidebar.

This is the code for my top navbar:

<header>
        <nav class="navbar navbar-expand-md  fixed-top">
            <a href="#" class="navbar-left"><img src="logo.svg" /></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
             </button>
            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-right ">
                    <img src="avatar.png">
                    <li class="nav-item dropdown ">
                        <a class="nav-link ">Hello</a>

                    </li>
                </ul>

            </div>
        </nav>
    </header>

And then my sidebar :

 <div class="container-fluid">

            <nav class="col-sm-3 col-md-2 d-none d-sm-block sidebar">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item collapsed active" data-toggle="collapse" data-target="#home" >
                        <a class="nav-link active" href="#"> <img src="homeIcon.png" /> Home <span class="sr-only">(current)</span></a>
                    </li>
                    <ul class="sub-menu collapse " id="home">

                        <li class="nav-item "><a class="nav-link" href="#" >&nbsp;FirstMember</a></li>
                        <li class="nav-item "><a class="nav-link" href="#">&nbsp;Second</a></li>
                        <li class="nav-item "><a class="nav-link" href="#">&nbsp;Third</a></li>
                        <li class="nav-item "><a class="nav-link" href="#">&nbsp;Fourth</a></li>

                    </ul>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><img src="secondElement.png" />&nbsp;Second Element</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><img src="" />&nbsp;History</a>
                    </li>

                </ul>

            </nav>

 <app-home></app-home>

So in app.component.html I am writing my sidebar and navbar, and then is the content.

The issue is that in the topbar.. the where the logo stands, takes the whole row, which then pushes the button and the Hello on the next row. Only the image inserted is smaller, but when I hover in the a href, it's in the whole row.

How do I fix this ? And also, every element on the sidebar has an image as an icon, is it better that when the screen gets smaller, the text gets removed and only icons show, or do I make the sidebar appear as a dropdown on the top in smaller screens?

I am using angular5 and bootstrap4. This is the css :

/* Move down content  */

body {
padding-top: 5.5rem;
background-color: #F4F4F4;

 }



.navbar {
background-color: #fff;
}  

.nav.nav-link a {
color: #;
}


.sidebar {
position: fixed;
top: 69px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
background-color: #
}

.sidebar li{
padding-left: 5px;
}
.sidebar .nav {
margin-bottom: 20px;

}
.sidebar .nav-item {
width: 100%;
}
.sidebar .nav-item+.nav-item {
margin-left: 0;
}
.sidebar .nav-link {
border-radius: 0;
}
.flex-column a {
color: #fff;
}



.dropdown{
font-weight: bold;  
color:#;
}


.nav-pills .active{
 background-color: ;
 font-weight:bold;
}
.nav-pills .nav-link.active {
background-color: ;
color: #1C2058;

}

I am using:

angular/cli: 1.5.0

Angular: 5.0.1

Node:8.9.1

bootstrap: ^4.0.0-alpha.6,

jquery: ^3.2.1,

I'd suggest making this into a jsfiddle so people can debug your issue instead of making us recreate your project. — mtpultz
I apologize. I tried doing that, but it wouldn't display the same way as it does when I run it from my angular project. Sidebar and topbar would display different. Because, when i create an html file locally, and write the same code in one page..it displays different, And then when I write the same code in the component, the anchor tag does that.. — user8865272
Also, you should mention what versions of the frameworks you're using are when you put forth a question. So Angular v2/4/5 using the Angular CLI or not, and Bootstrap v3/4 otherwise people will skip over your questions due to a lack of information. — mtpultz

mtpultz mtpultz · Accepted Answer · 2017-11-16T21:50:33

From your example your anchor isn't using .navbar-brand and instead uses .navbar-left, which if I remember is Bootstrap v3. I can't find navbar-left as a class in v4 documentation:

<a class="navbar-brand" href="#">
  <img src="logo.svg" />
</a>

You're also using nav-item for the dropdown, which is also incorrect it should be nav-link dropdown. I would get a new copy of your navbar from the v4 documentation and see if it works when you paste it in.

If it does, but just doesn't work in your application it might be due to ViewEncapsulation so you need to make sure your styles are either globally available (styles.scss) or they are in your navbar components SCSS file (navbar.component.scss or example.component.scss)

All you have left now is to comment out your custom CSS, and paste a fresh copy of the v4 navbar directly from the docs with no changes. That should work immediately. Then slowly start applying the custom changes until it breaks starting with just your branding.

Anchor tag in navbar takes whole row - angular

1 Answers