I'm using collections to generate a menu of categories.
The idea is to have this structure:
<nav class="collapse show navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0" id="navbar-vertical">
<div class="navbar-nav w-100 overflow-hidden" style="height: 350px">
Menu A
Menu B
Menu C
</div>
</nav>
Using collections, I managed to bring the categories in this way:
<nav class="collapse show navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0" id="navbar-vertical">
<div class="navbar-nav w-100 overflow-hidden" style="height: 350px">
<?php echo $this->Html->link(collection($json["data"])->combine('id', 'name')->toArray(), '/pages/link', array('class' => 'nav-item nav-link ')); ?>
</div>
</nav>
The problem is that the menus are not one under the other.
Could you help me with this structure?
Related
I have coded a very basic blog script it's nothing elaborate but does the job (built-in bootstrap 5 & PHP), everything is working as it should in desktop and mobile view, the only small thing I'm not sure about is, when I view the site in mobile view the image (logo) appears to the left-hand side (while in mobile view), I think it would look better in the centre.
Image of what I see:
The script is located at: https://www.the-golfer-guys.com/
It's not a big deal, but I'm not sure the best way to make it appear in the centre (while only in mobile view).
my navbar code:
<nav class="navbar navbar-expand-lg border-bottom navbar-white bg-white padding-bottom" id="mainNav">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<i class="fas fa-bars"></i>
</button>
<!-- mobile -->
<div class="collapse navbar-collapse w-100 justify-content-center" id="collapsibleNavbar">
<a class="navbar-brand" href="<?= urlFull(); ?>"><img src="<?= urlFull(); ?><?= getHeaderImage(); ?>" alt="<?= urlFull(); ?>"></a>
<ul class="nav nav-pills nav-fill ms-auto">
<li class="nav-item">Home</li>
<?php $pages = DB::getInstance()->select("SELECT * FROM `pages`"); ?>
<?php foreach($pages as $page) { ?>
<li class="nav-item"><?= $page['page_name']; ?></li>
<?php } ?>
<li class="nav-item">Contact</li>
</ul>
<ul class="nav navbar-nav ms-auto" style="padding-top: 10px;">
<li>
<form class="d-flex" action="<?= urlFull(); ?>search.php" method="get">
<input class="form-control me-2" type="search" name="s" placeholder="Search ..." aria-label="Search" required>
<button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
</nav>
Any advice or help would be appreciated, it's more my design OCD than anything.
I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
I have a menu on website. Below is the HTML code.
<header class="navbar navbar-sticky navbar-expand-lg navbar-dark">
<div class="container position-relative">
<a class="navbar-brand" href="./index.html">
<img class="navbar-brand-regular" src="logo.png"/>
<img class="navbar-brand-sticky" src="logo.png"/>
</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-inner">
<!-- Mobile Menu Toggler -->
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
On Mobile menu, when i click on a menu item, the menu did not closed. Below is the script code.
Did I miss anything?
// MAIN MENU TOGGLER ICON (MOBILE SITE ONLY)
$('[data-toggle="navbarToggler"]').click(function () {
$('.navbar').toggleClass('active');
$('body').toggleClass('canvas-open');
});
// MAIN MENU TOGGLER ICON
$('.navbar-toggler').click(function () {
$('.navbar-toggler-icon').toggleClass('active');
});
Bootstrap will handle all toggle/collapse by itself you do not need to write extra JS. Toggle button must not duplicate as you did to avoid messing up the navbar functioning.
Below is the answer. I optimized your params in few places. If my answer works for you, please tick it as final answer and upvote it so other people with same problem will get help too. Cheers
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="#" width="#"> </a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
<li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
</ul>
</div>
</div>
</nav>
I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.
<div class="portlet-body">
<div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
<ul class="nav nav-tabs nav-tabs-lg">
<li id="li_tab_1">
<a data-toggle="tab" href="#" data-target="#tab_1">
MyTab1
</a>
</li>
<li id="li_tab_2" class="active">
<a data-toggle="tab" href="#" data-target="#tab_2">
MyTab2
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade meter-tabs-height">
<div ng-include="'mytab1.html'"></div>
</div>
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
</div>
</div>
</div>
When I firstly come into the dialog, the dialog shows MyTab2 with no content at all.
However, when I click MyTab1 and then reclick MyTab2, the content appears.
How does this happen and how could I handle this problem?Thank you.
I have made a mistake in my code, just add class="active" could resolve it.
Replace
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
with
<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
<div ng-include="'mytab2.html'"></div>
</div>
Hello I am making a React App and am not getting my content displaying within certain sections for localhost:3000. I believe it has to do with folders like CSS/JSS/Images being in the Public folder and not rendering properly to the SRC folder.
Even possibly when parts of code are within a . But I am struggling to find the reason for this.
My classes were all changed to 'className', but still same issue
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return (
<div className="App">
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<nav className="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target" id="ftco-navbar">
<div className="container">
<a className="navbar-brand" href="index.html">Digi<span>Lab</span></a>
<button className="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span className="oi oi-menu"></span> Menu
</button>
<div className="collapse navbar-collapse" id="ftco-nav">
<ul className="navbar-nav nav ml-auto">
<li className="nav-item"><span>Home</span></li>
<li className="nav-item"><span>Services</span></li>
<li className="nav-item"><span>Projects</span></li>
<li className="nav-item"><span>About</span></li>
<li className="nav-item"><span>Testimony</span></li>
<li className="nav-item"><span>Blog</span></li>
<li className="nav-item"><span>Contact</span></li>
</ul>
</div>
</div>
</nav>
<section id="home-section" className="hero">
<h3 className="vr">Welcome to DigiLab</h3>
<div className="home-slider js-fullheight owl-carousel">
<div className="slider-item js-fullheight">
<div className="overlay"></div>
<div className="container-fluid p-0">
<div className="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(./bg_1.jpg);">
<div className="overlay"></div>
</div>
<div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<div className="text">
<span className="subheading">Welcome to the digilab</span>
<h1 className="mb-4 mt-3">Small Details Make A Big <span>Impression</span></h1>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>
<p>Get in touch</p>
</div>
</div>
</div>
</div>
</div>
<div className="slider-item js-fullheight">
<div className="overlay"></div>
<div className="container-fluid p-0">
<div className="row d-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(images/bg_2.jpg);">
<div className="overlay"></div>
</div>
<div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<div className="text">
<span className="subheading">Welcome to the digilab</span>
<h1 className="mb-4 mt-3"><span>Strategic</span> Design And <span>Technology</span> Agency</h1>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>
<p>Get in touch</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
}
This is what I am aiming to achieve:
enter image description here
And this is what I am getting in return:
enter image description here