NavMenuComponent

Moving on to the NavMenuComponent, here's the updated part of the navmenu.component.html template file:

[...]

<div class='navbar-header'>
<button type='button' class='navbar-toggle'
data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<quiz-search class="search-navmenu" placeholder="Type here..."></quiz-search>
</div>

[...]

Note how we just changed a single line, replacing the previous <a> link to the Home view with another instance of that still non-existent QuizSearchComponent.

As for the navmenu.component.less style sheet file, here's the updated content:

.main-nav {
position: fixed;
top: 85px;
left: 0;
right: 0;
z-index: 1;

li {
a {
cursor: pointer;
}

.glyphicon {
margin-right: 10px;
}

&amp;.link-active a,
&amp;.link-active a:hover,
&amp;.link-active a:focus {
background-color: #4189C7;
color: white;
}
}
}

@media (min-width: 768px) {
.main-nav {
top: 100px;
width: calc(~"25% - 30px");
min-width: 180px;

.navbar {
border-radius: 0 15px 15px 0;
border-width: 0px;
height: 100%;

a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ul {
float: none;
}

li {
float: none;
font-size: 15px;
margin: 6px;

a {
padding: 10px 16px;
border-radius: 4px;
}
}
}

.navbar-header {
float: none;
}

.navbar-collapse {
padding: 0px;
}
}
}

There's nothing relevant here, except for some minor restyling. For obvious reasons, we can't waste more pages explaining what these CSS lines actually do; we'll be able to see the results soon enough.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.51.157