I am trying to display text in the nav bar on the right hand side. All examples I have seen are using bootstrap like below:
<nav class="admin-nav navbar navbar-expand navbar-light">
<div class="container text-right">Test
<p >Some text</p>
</div>
</nav>
Some text is displayed to the right only if I add Test text to the div element - if I don't Some text is displayed on the left side of the nav-bar.
How can I have just one text displayed on the rigth side of the nav bar?
You can use flex layout(instead of the text-right). Try this :
<nav class="admin-nav navbar navbar-expand navbar-light">
<div class="container d-flex justify-content-end">
<div style="margin-right:10px">Some text</div>
<div >Some other text</div>
</div>
</nav>
Related
Just like the image I want to make, when Home is clicked, it is located in the navigation-aside-wrapper on the right.
Opening the navigation-aside-item page, I couldn't figure out how to do this. I would love it if you could help.
image
<div class="container">
<div class="navigation">
<div class="navigation-wrapper">
<div class="navigation-aside-item">
<span>Home</span>
</div>
<div class="navigation-aside-item">
<span>About</span>
</div>
</div>
</div>
<div class="navigation-aside-wrapper">
<div class="navigation-aside-item">
Home Child
</div>
<div class="navigation-aside-item">
About Child
</div>
</div>
</div>
If you are wanting to show different page content when you click an menu item you can use Javascript to show the correct content for each button.
Here is a post that shows how to do this. show hide html code/content using nav menu
The menu problem is on the mobile version, for the desktop it works fine.
In the mobile version the menu works, but when I go on one page and scroll down, anywhere I press on the left side redirects me to another page in the menu. Exactly where displays the menu page when it is open.
I mention that I have a menu with three lines and after entering a page click on X and the menu disappears, only that instead of pages if I click directs me to other pages on the site.
How to solve it?
<div class="center-container">
<div class="w3_agile_header">
<div class="w3_agileits_logo">
<div class="w3_menu">
<div class="agileits_w3layouts_banner_info">
</div>
<div class="mobile-nav-button">
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
</div>
<nav class="mobile-menu">
<ul>
<li><a href="https://ioanasandu.ro/online/web/index.html" >Despre mine</a></li>
<li>Repertoriu</li>
<li>Discografie</li>
<li>Evenimente</li>
<li>Foto</li>
<li>Video</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div>
I'm using the Bootstrap 4 theme and I've added a jQuery autocomplete search box to it. The problem I'm having though is the top of the suggest box is showing up behind the nav bar. How can I pull this to forefront? Here's the a working example of the problem: https://jsfiddle.net/phenkels/dwhzdg7b/11/. And a snippet of the HTML code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">DASHBOARD</a>
</div>
<!-- Start Search Bar -->
<div class="ui-widget nav navbar-nav" id="search-wrapper">
<div class="input-group ">
<input id="tags" placeholder="Search..." autocomplete=off>
</div>
</div>
<!-- End Search Bar -->
</nav>
</body>
Adding this CSS will increase the z-index:
#ui-id-1 {z-index: 9999;}
Fiddle: https://jsfiddle.net/7z7Lj6pw/
Preview
I'm creating a website using Bootstrap and I want to have a floating footer bar for choosing a language, Q&As etc.
But I would like to have a 'hide' button there.
It looks like this:
<div id="footer" class="navbar navbar-default navbar-fixed-bottom">
<div id="innerFooter" class="container-fluid">
<div class="collapse navbar-collapse">
<div class="col-xs-6">
<a class="btn btn-default " data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
Hide
</a>
</div>
<div class="col-xs-6">
...some buttons..
</div>
</div>
</div>
</div>
I have two problems with it:
When I hide the bar and I go to another page, that bar pops up
again.
When I click the hide button the first attempt doesn't do
anything, but when I click for the second time, the bar hides.
Thank you for your help!
For the first problem:
You have to store the state of the navbar visibility...
If you don't code it, how the browser could know if it should show or not the navbar... ?
For the second problem
You want to collapse but there is no initial state.
You should had collapse in classes to your navbar
Bootply : http://www.bootply.com/p1xNGxePan
HTML :
<div id="footer" class="navbar navbar-default navbar-fixed-bottom collapse in">
<div id="innerFooter" class="container-fluid">
<div class="collapse navbar-collapse">
<div class="col-xs-6">
<a class="btn btn-default" data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
Hide
</a>
</div>
<div class="col-xs-6">
...some buttons..
</div>
</div>
</div>
</div>
The twitter bootstrap docs site, the left nav gets fixed to the top in a mobile layout.
ex: http://twitter.github.com/bootstrap/javascript.html
I want to do the same without using the ...docs.css as is done in the Bootstrap site.
Currently, the issue that I'm facing is that the 'affix nav' stays on top of the content in mobile dimensions as you scroll through the content.
<div class="row">
<div class="span3">
<div data-spy="affix">
<ul class="nav nav-list nav-stacked">
<li> Objective
</li>
<li> Experience
</li>
<li> Skills
</li>
<li> Education
</li>
</ul>
</div>
</div>
<div class="span9">
<section id="objective">
<div class="page-header">
<h1>
Objective: <small> Do good </small>
</h1>
</div>
</section>
<section id="experience">
<div class="page-header">
<h1>
Exprience: <small> I worked at a bit </small>
</h1>
</div>
</section>
<section id="skills">
<div class="page-header">
<h1>
skills: <small> my skillz </small>
</h1>
</div>
</section>
<section id="education">
<div class="page-header">
<h1>
education: <small> I went to school </small>
</h1>
</div>
</section>
</div>
http://jsfiddle.net/gPsWe/1/
I want the 'affix nav' to get fixed to the top in a mobile layout with using the latest bootstrap v2.3.1. How do I go about it? Any suggestions?
Menus for mobile screens aren't always the easiest things to work with.
Using the layout you've started with, here's a simple idea where you remove the affixed behaviour for mobile screens: http://jsfiddle.net/panchroma/ZuELd/ . Doing this returns the menu to normal flow so then the content falls nicely into place underneath.
You might need to fine-tune the menu links, or even change them to a horizontal list for mobile screens, but that's easy enough to do from here.
CSS
#media (max-width: 767px){
.affix{
position:static;
}
}
Good luck!