No Content in double Navigation with fixed SideNav &amp;

Topic: No Content in double Navigation with fixed SideNav & fixed Navbar

Peter P. pro asked 7 years ago

I've a problem with the navigation "Double Navigation with fixed SideNav & fixed Navbar" the navbar in the Header has no Content, there is only a thik blue line.

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hello Peter,

Please use <logo> and <links> tags to manage your's content in navbar. Today we'll release new version of MDB Angular. Release will include fix for your's situation.

Please modify your's double nav code like code from below:
<pre class="code-toolbar language-markup"><code class=" language-markup">

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
 
 
 <logo><a class="navbar-brand" href="#">Navbar</a></logo>

<links>

<ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius>Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
 </li>

<li class="nav-item dropdown" dropdown>
 <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
 Basic dropdown<span class="caret"></span></a>
 <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
 <div class="divider dropdown-divider"></div>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
 </div>
 </li>

</ul>

<form class="form-inline waves-light" mdbRippleRadius>
 <input class="form-control mr-sm-2" type="text" placeholder="Search">
 </form>
 </links>

</mdb-navbar>

 </code></pre>
Best Regards,

Damian

Hello Peter,Please use and tags to manage your's content in navbar. Today we'll release new version of MDB Angular. Release will include fix for your's situation.Please modify your's double nav code like code from below: <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

    <span class="token comment" spellcheck="true"><!-- Navbar brand --></span>
    <span class="token tag"><span class="token punctuation"><</span>logo<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-brand<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Navbar<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>logo<span class="token punctuation">></span></span>

    <span class="token comment" spellcheck="true"><!-- Collapsible content --></span>
    <span class="token tag"><span class="token punctuation"><</span>links<span class="token punctuation">></span></span>

        <span class="token comment" spellcheck="true"><!-- Links --></span>
        <span class="token tag"><span class="token punctuation"><</span>ul <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-nav mr-auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token punctuation"><</span>span <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>(current)<span class="token tag"><span class="token punctuation"></</span>span<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Features<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Pricing<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>

            <span class="token comment" spellcheck="true"><!-- Dropdown --></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item dropdown<span class="token punctuation">"</span></span> <span class="token attr-name">dropdown</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">dropdownToggle</span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link dropdown-toggle waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
                Basic dropdown<span class="token tag"><span class="token punctuation"><</span>span <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>caret<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>span<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">*dropdownMenu</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-menu dropdown dropdown-primary<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Another action<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Something else here<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divider dropdown-divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Separated link<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>

        <span class="token tag"><span class="token punctuation"></</span>ul<span class="token punctuation">></span></span>
        <span class="token comment" spellcheck="true"><!-- Links --></span>

        <span class="token comment" spellcheck="true"><!-- Search form --></span>
        <span class="token tag"><span class="token punctuation"><</span>form <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-inline  waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control mr-sm-2<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"></</span>form<span class="token punctuation">></span></span>
    <span class="token tag"><span class="token punctuation"></</span>links<span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true"><!-- Collapsible content --></span>

<span class="token tag"><span class="token punctuation"></</span>mdb-navbar<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--/.Navbar--></span>

Best Regards,Damian

Please insert min. 20 characters.

Hello Peter, Please use <logo> and <links> tags to manage your's content in navbar. Today we'll release new version of MDB Angular. Release will include fix for your's situation. Please modify your's double nav code like code from below:

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

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

    <!-- Collapsible content -->
    <links>

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
            </li>

            <!-- Dropdown -->
            <li class="nav-item dropdown" dropdown>
                <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
                </div>
            </li>

        </ul>
        <!-- Links -->

        <!-- Search form -->
        <form class="form-inline  waves-light" mdbRippleRadius>
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
        </form>
    </links>
    <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Peter P.

Pro User 0Support score
1Questions 0Answers 0Snippets