So I get that that is a silly beginner question, but I can't figure it out. Its two parts:
THE SETUP
So I want to have a universal navbar on my site. I created a navigation.php file and I am using include on every page.
THE PROBLEM
On my index page, it is working great. However all of my other pages are within a contentFiles folder. When I navigate from the index page, back to the index page the contentPages, the sub-directory stays in the URL.
To see exactly what it is doing:
1. Go to http://www.newshongumpto.org
2. Click on News/Calendar > Calendar
3. Click on Home
Any suggestions? My next questions is how to make this dynamic from my dB, but I think I will attempt that first before coming back.
<nav class="navbar navbar-default navbar-fixed-top navbar-left" role="navigation">
<div class="nav-container container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<img src="/images/ShongumSkyhawkBird_Green_Brand.png" alt="Shongum Elementary School" class="skyhawk_navimage" width="45" height="56"></div>
<div class="collapse navbar-collapse" id="bs3-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li class="dropdown"> Membership <b class="caret"></b>
<ul class="dropdown-menu">
<li>Benefits of Membership</li>
<li class="divider"></li>
<li>Parent Membership Application</li>
<li>Teacher Membership Application</li>
</ul>
</li>
<li class="dropdown"> Programs <b class="caret"></b>
<ul class="dropdown-menu">
<li>Get Involved!</li>
<li class="divider"></li>
<li>Family Portraits</li>
<li>Room Parents</li>
<li>Skyhawk Enrichment</li>
</ul>
</li>
<li class="dropdown"> Classes <b class="caret"></b>
<ul class="dropdown-menu">
<li>Kindergarden</li>
<li>1st Grade</li>
<li>2nd Grade</li>
<li>3rd Grade</li>
<li>4th Grade</li>
<li>5th Grade</li>
</ul>
</li>
<li>Store</li>
<li class="dropdown"> News/Calendar <b class="caret"></b>
<ul class="dropdown-menu">
<li>News</li>
<li>Calendar</li>
</ul>
</li>
<li class="dropdown"> RSD<b class="caret"></b>
<ul class="dropdown-menu">
<li>RAM Alerts</li>
<li>District Calendar</li>
<li>Lunch Menu (Shongum Only)</li>
</ul>
</li>
<li><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="749L2346K28NW">
<input type="submit" value="Donate Now ยป" name="submit" title="Donate to your Shongum PTO Today!" class="paypal_btn">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form> </li>
</ul>
<a class="btn btn-default navbar-btn" href="../contentPages/membership/membership.php">Membership Sign-Up</button>
</a> </div>
</div>
</nav>
Change href="index.php" to href="/index.php"
Similarly add slash to all your urls . This way, all your urls will be routed from your website's base url
Relative links did the tricks... duh... (ugh)...
Related
I am building a WordPress theme with two pages (home & contact) but when I click on the contact, it doesn't show me the page... Maybe there is a problem in my path defining how can I give it a right path
<li>
CONTACT
</li>
<nav class="topnavbar navbar-default topnav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed toggle-costume" data-toggle="collapse" data-target="#upmenu" aria-expanded="false">
<span class="sr-only"> Toggle navigaion</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#"><img src="<?php bloginfo('template_directory');?>/image/logo1.png" alt="logo"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="upmenu">
<ul class="nav navbar-nav" id="navbarontop">
<li class="active">HOME </li>
<li class="dropdown">
CATEGORIES <span class="caret"></span>
<ul class="dropdown-menu dropdowncostume">
<li>Sport</li>
<li>Old</li>
<li>New</li>
</ul>
</li>
<li class="dropdown">
DEALERS <span class="caret"></span>
<ul class="dropdown-menu dropdowncostume">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
CONTACT
</li>
<button><span class="postnewcar">POST NEW CAR</span></button>
</ul>
</div>
</nav>
</div>
I have a problem with dropdown bootstrap menu in joomla. It looks like it's expaneded all the time. I've already overwritten a mod_menu, so < li > have a class = "nav-item" and I think it can be cause of this problem. Maybe someone had a simillar problem, and know how to solve this. enter image description here
The red element's should be visible only when i focus the 'dropdown menu', but they are visible all the time.
There is a html of the menu (Sorry for the style of code)
<nav class="navbar navbar-light navbar-expand-md" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav ml-auto" id="nav">
<li class="item-106 nav-item">Main</li><li class="item-107 deeper parent nav-item">Dropdown menu<ul class="nav navbar-nav ml-auto"><li class="item-108 nav-item">First
</li><li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
Edit: I forgot about fourth element in the menu, dont worry about this.
I would like to achieve something like 'hover me' on this page:
https://www.w3schools.com/howto/howto_css_dropdown.asp
the example in the link ( W3School ) is done with only css, but you html has bootstrap classes
so to make the dropdown work you need bootstrap's .js and
here's a working fiddle : https://jsfiddle.net/69hev2g4/23/
basically you needed an id for the second ul and add data-target and dropdown-collapse to the link before , and the class collapse for it to be hidden at first,
<nav class="navbar navbar-light" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav " id="nav" >
<li class="item-106 nav-item">Main</li>
<li class="item-107 deeper parent nav-item" style="width:284px;">Dropdown menu
<ul class="nav navbar-nav collapse"id="dropdown">
<li class="item-108 nav-item">First</li>
<li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
you can use this tool to see the differences in code : https://www.diffchecker.com/
I'm new at web programming was was wondering if you guys could help me. What I want I guess must be easy, but can't really find /how/.
I have my cute little sidebar that isn't even finished and is constantly needing to be changed. I already gave up on updating it until everything is ready:
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Search</li>
<li>Dashboard</li>
<li>Lookup</li>
</ul>
</li>
<li><a><i class="fa fa-cubes"></i> Inventory <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Asset List
<li><a>Asset Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="create.php">Create Assets
</li>
<li>Update Assets
</li>
</ul>
</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Tickets <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Ticket Overview
<li><a>Ticket Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Create a Ticket
</li>
<li>Update a Ticket
</li>
</ul>
</li>
<li><a>User Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">User List
</li>
<li>Create a User
</li>
<li>Update a User
</li>
</ul>
</li>
</ul>
<li><a><i class="fa fa-laptop"></i> Loans <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a>Loan Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="create.php">Create a Loan
</li>
<li>View Loans
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
But the problem is that I'm doing it like an uncultured swine and keeping that in every single page where it is needed. And if I want to make a change, I need to edit every single page.
I was wondering if there was a way to have a class, or something, with my header, sidebar, and footer, and load them across all pages that needed them?
Thank you for your help!
You can extract the sidebar code into its own PHP file (sidebar.php) then include it where you need it with include or include_once
<html>
...
<body>
<?php include './sidebar.php' ?>
...
</body>
</html>
Using include is essentially the same as copy pasting the code into your file. I.e. It will be added where you include the code and it will be evaluated there as well
Its very simple, Save you sidebar in a php file lets call it sidebar.php, and add below code in your other PHP file where you want to show the sidebar.
<?php include_once('sidebar.php');?>
That's it.
I need help creating a custom WordPress menu. WordPress Adds its own classes that I don't need. I need someone to help me solve this issue. WordPress doesn't add some attributes when I need them on drop-down.
Here is my HTML code.
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid container">
<div class="row m04m">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav">
<span class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<span class="btn-text">Select Page</span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav">
<li class="active ">Home</li>
<li class=" dropdown">
About
<ul class="dropdown-menu" role="menu">
<li>Company Profile</li>
<li>Board of directors</li>
<li>Owner's message</li>
<li>team</li>
</ul>
</li>
<li>
projects
</li>
<li class=" dropdown">
Media
<ul class="dropdown-menu" role="menu">
<li>Gallery</li>
<li>documents</li>
</ul>
</li>
<li class=" dropdown">
news
</li>
<li class=" dropdown">
contact
<ul class="dropdown-menu" role="menu">
<li>Conact us</li>
<li>Careers</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav> <!--Main Nav-->
What you are looking for is the Walker class in WordPress. It's built in and can help you create custom navigation amongst other things.
You can read more about it here: https://codex.wordpress.org/Class_Reference/Walker
Ok, im making a website and i really want to have a navbar with a drop down.
So it will be like | BRAND - Link Link Link.
When you click BRAND it will drop a dropdown that will have links, similar to just a link dropdown.
<html>
<style>
.navbar .divider-vertical{
height:50px;
border-left: 1px solid rgb(242, 242, 242); /*Feel free to change left color or width!*/
border-right: 1px solid rgb(255, 255, 255);/*Feel free to change right color or width!*/
}
.navbar-brand {
margin-left: 150px; /* This value could be different for another layout */
}
#brand-Dropdown {
margin-left: 150px;
top: 48px;
}
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Gippix Servers <b class="caret"></b>
<ul id = "brand-Dropdown" class="dropdown-menu dropdown-toggle navbar-collapse">
<li>MrBumtart</li>
<li>Xyrize</li>
<li class="divider"></li>
<li>Help</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<a class = "navbar-btn btn btn-info pull-right" href = "/donate"><b>Donate<b></a>
</body>
Ok I found it for you : Code snippet copied from getbootstrap.com and modified by me to implement your idea:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>