Hi there,

I completely get you - it is said to be working out of the box, while in fact the documentation does not catch up with the package. I am sorry that what you came for, a page navigation solution snippet, was not delivered to you in a desired manner. Thanks to yours and others feedback we are able to make the package and the documentation better. We will be replacing the faulty documentation on Double Navigation shortly.

Meanwhile, please be informed that the MDB React PRO 4.7.0 is out and it features some new tools to deal with the issue. For dynamic changes consider using onOverlayClick hook, designating the moment SideNav is closed on user interaction, allowing to apply custom changes in styles (like, say, moving something onto the SideNav space). It seems, though, that yours is a less dynamic use case, as it involves two fixed entities. Here I present a hotfix using left padding. Please paste the following into a MDB React-enabled project.

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, SideNavLink } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class DoubleNavigationExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: false
    };
  }

  onClick = () => {
    this.setState({
      collapse: !this.state.collapse,
    });
  }

  render() {
      return (
        <Router>
          <div>
            <Navbar color="indigo" dark expand="md" scrolling style={{paddingLeft: '250px'}}>
              <NavbarBrand href="/">
                <strong>Navbar</strong>
              </NavbarBrand>
              { !this.state.isWideEnough && }
              <Collapse isOpen = { this.state.collapse } navbar>
                <NavbarNav left>
                  <NavItem active>
                    <NavLink to="#">Home
                  </NavItem>
                  <NavItem>
                    <NavLink to="#">Features
                  </NavItem>
                  <NavItem>
                    <NavLink to="#">Pricing
                  </NavItem>
                </NavbarNav>
                <NavbarNav right>
                  <NavItem>
                    <form className="form-inline md-form my-0">
                      <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/>
                    </form>
                  </NavItem>
                </NavbarNav>
              </Collapse>
            </Navbar>
            <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" hidden triggerOpening={this.state.isLeftOpen} breakWidth={1300} className="deep-purple darken-4" fixed>
              <li>
                <ul className="social">
                  <li><a href="#!"><Fa icon="facebook"></Fa></a></li>
                  <li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
                  <li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
                  <li><a href="#!"><Fa icon="twitter"></Fa></a></li>
                </ul>
              </li>
              <SideNavNav>
                  <SideNavLink>Submit listing
                  <SideNavLink>Registration form
                </SideNavCat>
                <SideNavCat name="Instruction" icon="hand-pointer-o" href="#">
                  <SideNavLink>For bloggers</SideNavLink>
                  <SideNavLink>For authors</SideNavLink>
                </SideNavCat>
                <SideNavCat name="About" icon="eye">
                  <SideNavLink>Instruction</SideNavLink>
                  <SideNavLink>Monthly meetings</SideNavLink>
                </SideNavCat>
                <SideNavCat name="Contact me" icon="envelope-o">
                  <SideNavLink>FAQ</SideNavLink>
                  <SideNavLink>Write a message</SideNavLink>
                </SideNavCat>
              </SideNavNav>
            </SideNav>
          </div>
        </Router>
    );
  }
}

export default DoubleNavigationExample

Again, sorry for the inconvenience. And huge thanks for reaching out!
I will be out for some time, but do not hesitate to let us know whether the solution covered you for at least a small bit. In any case, my colleagues are at your disposal.

with Best Regards,
Kuba

>I suggest starting off with snippets that are not, as I mentioned, “overdue”.  Going with original SideNav and Navbar components can get you way further with little cunning! Thank you, I really appreciate your suggestion! But, since we are on this note, let me share my part of the story. Your website is advertising MDB React Pro's "compositions" as follows: "MDB provides you several useful, ready-to-use navigation layouts with various predefined navigation types" (here: https://mdbootstrap.com/react/layout/react-navigation/). Frankly, ‘Advanced Double Navigation with fixed SideNav & fixed Navbar’ component (along with very few others) was one of the main motivations for my purchase - I thought I'd get working "template" web-site component, fill/replace it with my specific data and voila - would save myself a lot of time. But, honestly, is it really quite "ready-to-use" ? Sincerely,  

Hi there,

Sorry I kept you waiting. My suggestion: SideNav default width is 240px. Consider creating a CSS class with {margin-left:250px} (and perhaps some transition) and applying it to the Navbar's NavbarBrand component whenever the SideNav is open, which in a fixed propped case means always. Fixing snippets has just been scheduled.

With Best Regards,
Kuba

>The SideNav snippet has already been updated.

okia: Really? I cannot see that :(
Here is what I am doing:

Step 1: Updated mdbreact-pro as described by Anna Morawska [here](https://mdbootstrap.com/support/mdb-react-new-version/). Now my project refers to the latest mdbreact pro version, correct?
Step 2: repeated steps 2-4 from the original test case (see this post, above).
Result: the same. Problem is not solved. SideNav continues to overlap NavBar :(

Thoughts?