1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Navbar

costa free asked 5 years ago

Hi,I paste the navbar content to the html file and when I open in a browser it is out of configuration.Someone can help me ? cristiana

Piotr Glejzer staff commented 5 years ago

Hello, Yes of course that we can. But we need your HTML code to see what is going on. So can you us share your HTML/CSS/js code? Best, Piotr

costa free answered 5 years ago

Hi Piotr, I noticed, but I was following the Bootstrap tutorial and it didn't mentioned anything about angular. The only option in Bootstrap is navigation?   Thanks, Cristiana  

Piotr Glejzer staff commented 5 years ago

You can use our mdb navigation. Here is a link: Navigation

costa free answered 5 years ago

Hi Piotr, Follow the code:   <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body> <header> <!--Navbar--> <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo"> <!-- Navbar brand --> <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand> <!-- Collapsible content --> <links> <!-- Links --> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbWavesEffect>Features</a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbWavesEffect>Pricing</a> </li> <!-- Dropdown --> <li class="nav-item dropdown" dropdown> <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect> Basic dropdown<span class="caret"></span></a> <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"> <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a> <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a> <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a> <div class="divider dropdown-divider"></div> <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a> </div> </li> </ul> <!-- Links --> <!-- Search form --> <form class="form-inline waves-light" mdbWavesEffect> <div class="md-form mt-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> </div> </form> </links> <!-- Collapsible content --> </mdb-navbar> <!--/.Navbar--> </header> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html>

costa free commented 5 years ago

in the browser(google and safari) it loads without configuration. I've tried also to use container to wrap the code in a container but the configuration does not work for navbars and cards at all.

Piotr Glejzer staff commented 5 years ago

Did you notice that is angular navbar? Did you attend at all installation tutorial about mdbootstrap-angular? Here is a link about angular navbars: Angular - navbars Here is a link about angular tutorial: Angular - tutorial Best, Piotr
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
costa
25Support score
3Questions 3Answers 0Snippets