Need help on double navigation bar

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Need help on double navigation bar

Post by shaibustephen » Sat Jul 06, 2019 2:56 pm

I want to create a double navigation bar from bootstrap 4.3.1. It will have top navigation and main navigation as soon in the screenshot attached. The two should toggle and collapse together on mobile device. Though, i have put up a trial as soon below. Please, help me look at it and let me know where i have gone wrong? I need it in such a way that i can style each respective menu bar different with different background color. Let me know how to achieve these?


<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse navbar-dark bg-dark text-light" id="navbarsExample07">
<div class="row">
<ul class="navbar-nav mr-auto top-nagivation">
<li class="nav-item active">
<a class="nav-link" href="#">Example 1<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Example 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</a>
<div class="dropdown-menu" aria-labelledby="dropdown07">
<a class="dropdown-item" href="#">Example 1</a>
<a class="dropdown-item" href="#">Example 1</a>
<a class="dropdown-item" href="#">Example 1</a>
</div>
</li>
</ul>
</div><!--row-->

<div class="row">
<ul class="navbar-nav mr-auto main-navigation bg-light text-dark">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown07">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div><!--row-->
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>



/*menus*/
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 0;
}



.top-nagivation {
position: relative;
}

.top-navigation .navbar-nav .nav-link:hover, .top-navigation .navbar-dark .navbar .navbar-nav .nav-link:active {
color:#D9272A
}

.top-navigation .dropdown-item:hover, .dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #f8f9fa;
}

.top-navigation .navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
}


.main-navigation {
position: relative;
}

.main-navigation .navbar-nav .nav-link:hover, .top-navigation .navbar-dark .navbar .navbar-nav .nav-link:active {
color:#D9272A
}


.main-navigation .dropdown-item:hover, .dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #f8f9fa;
}


.main-navigation .navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
}
navigation.png
You do not have the required permissions to view the files attached to this post.
Last edited by toivo on Sat Jul 06, 2019 5:39 pm, edited 1 time in total.
Reason: mod note: moved to 3.x Templates on request

User avatar
paulala
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Sat Oct 30, 2010 12:32 pm
Location: Scotland
Contact:

Re: Need help on double navigation bar

Post by paulala » Sat Jul 13, 2019 2:32 pm

Put a wrapper around each bar in the html and add a class or id that you can then target as you wish.
Warm Regards,
Paula Livingstone, Skydiving Instructor and Network Security Consultant
https://paulalivingstone.com
http://rustyice.co.uk

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Wed Jul 17, 2019 2:37 am

Just like the above, can you help me put wrapper as you have indicated as i am a novice in css?

User avatar
paulala
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Sat Oct 30, 2010 12:32 pm
Location: Scotland
Contact:

Re: Need help on double navigation bar

Post by paulala » Wed Jul 17, 2019 7:07 am

Ok try this:

add the following css:

#navtop{
background-color:blue;
}
#navbot{
background-color:red;
}

Then amend the html to this:

<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse navbar-dark bg-dark text-light" id="navbarsExample07">
<div class="row" id="navtop">
<ul class="navbar-nav mr-auto top-nagivation">
<li class="nav-item active">
<a class="nav-link" href="#">Example 1<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Example 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</a>
<div class="dropdown-menu" aria-labelledby="dropdown07">
<a class="dropdown-item" href="#">Example 1</a>
<a class="dropdown-item" href="#">Example 1</a>
<a class="dropdown-item" href="#">Example 1</a>
</div>
</li>
</ul>
</div><!--row-->

<div class="row" id="navbot">
<ul class="navbar-nav mr-auto main-navigation bg-light text-dark">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown07">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div><!--row-->
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
Warm Regards,
Paula Livingstone, Skydiving Instructor and Network Security Consultant
https://paulalivingstone.com
http://rustyice.co.uk

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Sat Jul 20, 2019 1:53 pm

Please check the code. The two menus falls in the same line despite using row to wrap each of the menu

User avatar
paulala
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Sat Oct 30, 2010 12:32 pm
Location: Scotland
Contact:

Re: Need help on double navigation bar

Post by paulala » Sat Jul 20, 2019 1:56 pm

Its your code I copied. I just added an ID to two divs and targeted some CSS at them.
Warm Regards,
Paula Livingstone, Skydiving Instructor and Network Security Consultant
https://paulalivingstone.com
http://rustyice.co.uk

User avatar
paulala
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Sat Oct 30, 2010 12:32 pm
Location: Scotland
Contact:

Re: Need help on double navigation bar

Post by paulala » Sat Jul 20, 2019 1:58 pm

Have you checked the original code you posted works as you expect it to?
Warm Regards,
Paula Livingstone, Skydiving Instructor and Network Security Consultant
https://paulalivingstone.com
http://rustyice.co.uk

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Sat Jul 20, 2019 7:42 pm

I copied bootstrap 4.3.1 navbar sample. Please can you do same at your end and adjust and post it to me to see.

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Sun Jul 21, 2019 11:51 am

The original code was okay but after putting row to divide it, it causes the two respective menu to cluster in a single line instead or one at the top while the other at the bottom. Please test run the amended code to detect what I am saying

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Sun Jul 21, 2019 2:01 pm

Is that a Joomla template that you are working on? If so maybe you should attach your template and we have chance to see it.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Sun Jul 21, 2019 11:27 pm

This is the template index file and css below
<?php
/**
* @package Joomla.Site
* @subpackage Templates.protostar
*
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

/** @var JDocumentHtml $this */

$app = JFactory::getApplication();
$user = JFactory::getUser();

// Output as HTML5
$this->setHtml5(true);

// Getting params from template
$params = $app->getTemplate(true)->params;

// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');

if ($task === 'edit' || $layout === 'form')
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

// Add template js
JHtml::_('script', 'bootstrap.js', array('version' => 'auto', 'relative' => true));

// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

// Add Stylesheets
JHtml::_('stylesheet', 'bootstrap.css', array('version' => 'auto', 'relative' => true));
JHtml::_('stylesheet', 'font-awesome.min.css', array('version' => 'auto', 'relative' => true));
JHtml::_('stylesheet', 'style.css', array('version' => 'auto', 'relative' => true));

// Use of Google Font
if ($this->params->get('googleFont'))
{
JHtml::_('stylesheet', 'https://fonts.googleapis.com/css?family=' . $this->params->get('googleFontName'));
$this->addStyleDeclaration("
h1, h2, h3, h4, h5, h6, .site-title {
font-family: '" . str_replace('+', ' ', $this->params->get('googleFontName')) . "', sans-serif;
}");
}

// Template color
if ($this->params->get('templateColor'))
{
$this->addStyleDeclaration('
body.site {
border-top: 3px solid ' . $this->params->get('templateColor') . ';
background-color: ' . $this->params->get('templateBackgroundColor') . ';
}
a {
color: ' . $this->params->get('templateColor') . ';
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.btn-primary {
background: ' . $this->params->get('templateColor') . ';
}');
}

// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));

// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Adjusting content width
if ($this->countModules('position-8') && $this->countModules('position-7')) {
$span = "col-md-6";
} elseif ($this->countModules('position-8') && !$this->countModules('position-7')) {
$span = "col-md-9";
} elseif (!$this->countModules('position-8') && $this->countModules('position-7')) {
$span = "col-md-9";
} else {
$span = "col-md-12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="' . JUri::root() . $this->params->get('logoFile') . '" alt="' . $sitename . '" />';
}
elseif ($this->params->get('sitetitle'))
{
$logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle'), ENT_COMPAT, 'UTF-8') . '</span>';
}
else
{
$logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>';
}
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />

</head>
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '')
. ($this->direction === 'rtl' ? ' rtl' : '');
?>">



<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
<?php endif; ?>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse navbar-dark bg-dark text-light" id="navbarsExample07">
<div class="row" id="navtop">
<ul class="navbar-nav mr-auto top-nagivation">
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
</div><!--row-->

<div class="row" id="navbot">
<ul class="navbar-nav mr-auto main-navigation bg-light text-dark">
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
</div><!--row-->
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>




<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/slider/3.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
<!-- Body -->
<div class="site-wrapper " id="top">

<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">

<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row">
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="col-md-3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<main id="content" role="main" class="<?php echo $span; ?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<div class="clearfix"></div>
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>
<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="col-md-3">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
&copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,label,legend,table,caption,tfoot,thead{background: transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;}
tr,th,td {background: transparent;border: 1px solid #e1e1e1;font-style: inherit;font-weight: inherit;margin: 0;padding-left: 7px;outline: 0;vertical-align: baseline;}
table {border-collapse: collapse;border-spacing: 0; width: 100%; border: 1px solid #e1e1e1;}
html {overflow-y: scroll;}
img{object-fit:contain;max-height: 100%;max-width: 100%;display: block;margin: auto auto;}

/* Main Layout */
html {
font-size: 100.01%;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: #f3f5f6;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body { font-family: Helvetica, Arial, sans-serif; font-size:13px; line-height: 18px; color: #555; height: 100%; padding:0;}

body{
;
}

img {
max-width: 100%;
width: auto \9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

ul, ol {
padding: 0;
margin: 0 0 9px 25px;
}



h1, h2, h3, h4, h5, h6 {
margin: 12px 0;
word-wrap: break-word;
}


h1, h2, h3, h4, h5, h6 {
margin: 9px 0;
font-family: inherit;
font-weight: bold;
line-height: 18px;
color: inherit;
text-rendering: optimizelegibility;
}

h1, h2, h3 {
line-height: 36px;
}

h2 {
font-size: 22px;
line-height: 24px;
}


h3 {
font-size: 18px;
line-height: 20px;
}


@media (min-width: 1200px) {

.site-wrapper {
width: 970px;
margin: auto;
}

}




/* ++++++++++++++ Link ++++++++++++++ */

a {
color: #222;
text-decoration: none;
}

a:focus {
outline: thin dotted;
}

a:hover,
a:active {
color: #000;
outline: 0;
}


.pull-right {
float: right;
}
/* ++++++++++++++ nav ++++++++++++++ */
.nav {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
}


.pull-left {
float: left;
}



/*--------------------------------------------------------------
Navigation
--------------------------------------------------------------*/

.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}


.navbar-expand-md .navbar-nav .nav-link {
padding-right: 0.8rem;
padding-left: 0.8rem;
}

.navbar .nav-link{

}



.navbar {
width: 100%;
height: 100%;
justify-content: center;
}


.navbar-ul, .navbar ul ul{
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.3;
}



.navbar-nav ul li{
float:left;
position:relative;
}


.navbar-nav ul li:last-child{
border-right: none
}
.navbar-nav ul{
position:relative;
list-style:none;
padding:0;
margin:0;
}


.navbar-nav ul li a {
color: #A9A9A9;
}

.navbar-nav ul ul li {
border-bottom: solid 1px #EBA1A2;
color: #F3F3F3
}


.navbar-nav ul ul li ul a {
background: #F3F0A0
}




.navbar-nav ul li:hover > ul,
.navbar-nav ul li:focus-within > ul, /* this is the line we add */
.navbar-nav ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}



.custom-navbar {
margin: auto;
}

.navbar .form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
height: 2rem;
background: #DDDDDD;
}


.navbar .btn{
background: #ffc107;
border: #ffc107;
color: #fff
}
/*.navbar-dark .navbar-toggler {
color: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.1);
}


.navbar-expand-lg .navbar-toggler {
display: none;
}

.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}*/

#navtop{
background-color:blue;
}
#navbot{
background-color:red;
}


.carousel{
background: url(../images/bg.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-0-background-size:cover;
background-size:cover;
}


/* ++++++++++++++ blog ++++++++++++++ */

.blog-featured {
padding: 0;

}

.blog-featured .item img{
width: 100%;
}


.page-header {
margin: 2px 0px 10px 0px;
padding-bottom: 5px;
}

.page-header {
padding-bottom: 8px;
margin: 18px 0 27px;
border-bottom: 1px solid #eee;
}


/* ++++++++++++++ breadcrumbs ++++++++++++++ */
.breadcrumbs,.article-info {
padding: 7px;
margin: 0 0 18px;
list-style: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.article-info.muted dd{display:inline-block}
.article-info-term{float: left}
.breadcrumbs li {
display: inline-block;
}


/* ++++++++++++++ pagenav ++++++++++++++ */
.pagenav {
text-align: right
}

.pagenav ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
}

.pagenav li {
display: inline;
margin: 0;
padding: 0
}

.pagenav a,span.pagenav {
padding: 0 14px;
margin: 0;
text-decoration: none;
border: 1px solid #ddd;
border-left: 0 solid #ddd;
display: inline-block;
line-height: 1.9em;
}

.pagenav li:first-child a,.pagination-start span {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
border-left: solid 1px #ddd
}

.pagenav li:last-child a,.pagination-end span {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

.pagination ul {
margin: 10px 10px 10px 0;
padding: 0
}

.pagination li {
display: inline;
}

.pagination a {
padding: 0 14px;
line-height: 2em;
text-decoration: none;
border: 1px solid #ddd;
border-left: 0 solid #ddd;
display: inline-block
}

.pagination .active a {
cursor: default;
}

.pagination span,.pagination span a:hover {
cursor: default;
padding: 0 14px;
line-height: 2em;
}

.pagination li:first-child a {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}




/* ++++++++++++++ sidebar ++++++++++++++ */
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #FF0000;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.well .page-header {
margin: 0px 0px 5px 0px;
}


.sidebar-nav ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of
content*/
}

.sidebar-nav ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.sidebar-nav ul li a{
color: #A70303;
background: url(../images/arrowbullet.png) no-repeat center left; /*custom bullet
list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.sidebar-nav ul li a:visited{
color: #A70303;
}

.sidebar-nav ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

/* ++++++++++++++ form general++++++++++++++ */
.add-on + #modlgn-username, .add-on + #modlgn-passwd {
width: 122px;
}


.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
display: inline-block;
*display: inline;
*zoom: 1;
margin-bottom: 0;
vertical-align: middle;
}

.input-append, .input-prepend {
display: inline-block;
margin-bottom: 9px;
vertical-align: middle;
font-size: 0;
white-space: nowrap;
}





@media screen and (min-width: 1200px){


}


@media screen and (max-width: 979px){
#login-form .input-small {
width: 102px;
}
}


@media screen and (max-width: 767.98px){
#login-form .input-small {
width: 102px;
}

.navbar-nav>ul{position:relative;list-style:none;padding:0;margin:0;}
.navbar-nav>ul>li{float:none;position:relative;width: 90%; }
.navbar-nav ul li a {border-bottom: solid 1px #EBA1A2;color: #F3F3F3}
.navbar-nav ul li{border-right:none}
}


/*Styles for screen 640px and lower*/
@media screen and (max-width: 640px){
.navbar-nav>ul{position:relative;list-style:none;padding:0;margin:0;}
.navbar-nav>ul>li{float:none;position:relative;width: 90%; }
.navbar-nav ul li a {border-bottom: solid 1px #EBA1A2;color: #F3F3F3}
.navbar-nav ul li{border-right:none}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
.navbar-nav>ul{position:relative;list-style:none;padding:0;margin:0;}
.navbar-nav>ul>li{float:none;position:relative;width: 90%; }
.navbar-nav ul li a {border-bottom: solid 1px #EBA1A2;color: #F3F3F3}
.navbar-nav ul li{border-right:none}
}

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Mon Jul 22, 2019 6:37 am

If you do not mind please zip your template and attach it here thus we can test it.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Mon Jul 22, 2019 11:53 am

Download the attached template
You do not have the required permissions to view the files attached to this post.

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Mon Jul 22, 2019 6:04 pm

Hello I have wrapped navigation modules as described here (https://getbootstrap.com/docs/4.0/components/navbar/ ) and it worked. I have made some minor css changes. I have also added navbot and navtop classes. I think you can do rest of the work. I have not removed your navbar. This is screenshot on my localhost
2.jpg
1.jpg

Code: Select all

<nav class="navbar navtop navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
<jdoc:include type="modules" name="position-1" style="none" />
  </div>
</nav>

<nav class="navbar navbot navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
<jdoc:include type="modules" name="position-1" style="none" />
  </div>
</nav>
You do not have the required permissions to view the files attached to this post.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Tue Jul 23, 2019 12:42 pm

You got the whole things wrong. What i am requesting for is how can the two menus toggle and collapse together at once in a mobile device. In this sample given, i have to click each before it can collapse. Look at the view of this https://forum.joomla.org/ on a mobile device despite having two top navigation menus, it toggle and collapse together at once on a mobile device

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Tue Jul 23, 2019 4:15 pm

I am confused I see only one toggle and one menu on forum.joomla.org on mobile screen.
1.jpg
2.jpg
You do not have the required permissions to view the files attached to this post.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Wed Jul 31, 2019 2:42 am

The attachment below is an exact sample of the kind of menus sample I am talking about. Look at it thoroughly and let me know how I can get my bootstrap navbar navigation as below like that.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
You do not have the required permissions to view the files attached to this post.

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Wed Jul 31, 2019 12:13 pm

Now it is okay see attached images and use attached zip. There is some extra css work to be done you can do it I think. There are 2 module positions one is position-1 other position-12 you should publish 2 different menus for each one. You can style each one as you want.
2.jpg
1.jpg
You do not have the required permissions to view the files attached to this post.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Fri Aug 02, 2019 12:21 am

Thanks so much. The bootstrap menu sample I forwarded to you has container and navbar brand but you eliminated it. I tried including container in it but mess up the navbar. Kindly help me look at it critically and let me know where I for it all wrong?

<nav class="navbar navtop navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="container"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<jdoc:include type="modules" name="position-1" style="none" />
</div></div>
</nav>

<nav class="navbar navbot navbar-expand-lg navbar-light bg-light">
<div class="contaner"> <a class="navbar-brand" href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
<?php endif; ?>
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<jdoc:include type="modules" name="position-1" style="none" />
</div></div>
</nav>

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Fri Aug 02, 2019 7:06 am

Hello why do you need container class?
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Fri Aug 02, 2019 4:57 pm

How do. I make the navigation to align to the width of the site then? As you can see I am using container to detamine the width of my site. What possible way can I get this done for it to align to my website width

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Sat Aug 03, 2019 6:20 am

okay I thought that you would use the menu fullwidth as the 2.html file that you sent... then your navbar code should be like this
<nav class="navbar navtop navbar-expand-lg navbar-light bg-light container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<jdoc:include type="modules" name="position-1" style="none" />
</div>
</nav>

<nav class="navbar navbot navbar-expand-lg navbar-light bg-light container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<jdoc:include type="modules" name="position-12" style="none" />
</div>
</nav>
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on double navigation bar

Post by shaibustephen » Mon Aug 05, 2019 12:52 am

The below screenshot is what i get using the latest modified code. It turns vertical instead of horizontal. what have i done wrong? kindly view my css below

/* ++++++++++++++ Navigation++++++++++++++ */
.navbar-nav ul{
margin: 0;
padding: 0;
list-style-type: none;
background: #938E8E;
position: relative;
}
.navbar-nav ul li{
display: inline-block;
}



.navbar-nav ul li a{
color: #3125CB;
text-decoration: none;
padding: 15px;
display: block;
}



ul li:hover{
background: lightgrey;
}



.navbar-nav ul ul{
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}


.navbar-nav ul li:hover ul{
display: block;
}


.navbar-nav ul li i{
color: #C05DB3;
float: right;
padding: 20px;
}

.navbar-nav ul ul li{
display: block;
background: #EBA3A4
}


nav div{
background: #A7A7A7;
color: #272121;
padding: 0;
cursor: pointer;
display: none;
}

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 590
Joined: Sun Apr 13, 2008 8:10 pm

Re: Need help on double navigation bar

Post by JTema » Tue Aug 06, 2019 3:08 pm

Hello no screenshot added inyour message. I have checked the code that I have provided there is no problem. See attached images.
1.jpg
2.jpg
You do not have the required permissions to view the files attached to this post.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template


Post Reply

Return to “Templates for Joomla! 3.x”