I've written something of a 'custom' nav bar using Bootstrap 4.5.
Basically, it's two columns/grids with a logo in the right column and a list that acts as a nav bar in the other.
I am really pleased with how it looks on a laptop/computer/tablet etc:
But it looks awful on mobile because the logo is aligned to the left (inherited, not actually using anything to align it left) and the list is aligned to the right (class="... text-right ...").
I'd like to make it so both the logo and list are aligned center on smaller mobile. I've tried a few things, like using an #media attribute in css with float:center;, and the only other way I can think to do this is to make the normal nav bar hidden/invisible on mobile and add a new one that's only visible on mobile, but I really don't want to have to do that as it'd mean I'd have to add links to the list twice etc.
I also tried aligning just the list center with this documentation: https://getbootstrap.com/docs/4.0/utilities/text/, but it didn't work.
My current nav-bar is:
<div class="topsection">
<div class="container">
<div class="row">
<div class="col-sm">
<img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px">
</div>
<div class="col-sm align-baseline">
<p><ul class="list-inline text-right font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul></p>
</div>
</div>
</div>
</div>
<hr class="main">
(The attributes main and topsection aren't important, they just style the backgrounds of things etc)
Currently, it looks like this on mobile:
Use the Bootstrap utility classes. Alignment is already responsive...
<div class="topsection">
<div class="container">
<div class="row justify-sm-content-between justify-content-center">
<div class="col-sm col-auto">
<img class="img-responsive" src="//placehold.it/120x50" height="50px">
</div>
<div class="col-sm">
<ul class="list-inline text-sm-right text-center py-2 font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul>
</div>
</div>
</div>
</div>
Demo
.your-class{
display:flex;
place-content:center;
}
should work with basic css.
Related
I designed a sidebar with links and am trying to give space between each of the links ive tried adding
.sidebar-nav>li>a{ padding-bottom: 500px; }
its not adjusting what alternative can be used to adjust this see full code below...
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
<ul class="navbar sidebar-nav">
<li class="active">Reports</li>
<li>Reports</li>
<li>Reports</li>
</ul>
</div>
<div class="col-sm-9 col-md-10"></div>
</div>
</div>
don´t know if it's the solution you're looking for, but adding a:
</br>
before the
<li>
adds a space before the next line. try it!
Good day, I am trying to be consistent on the interface aspect of my website. Right now I am trying to make the list in my header become rows if I adjust my screen size to a smaller size. I am stuck in figuring out how to make it into rows if I place multiple links in one div class row. Thanks for any help I can get.
HTML:
<div class="bg-color-white strong">
<div class="container">
<nav>
<div class="row spacer">
<div class="col-md-1">
<div class="logo">
<img src="img/logo_png_solo.png">
</div>
</div>
<div class="col-md-8">
<ul class="list1">
<li>Home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-3">
Sign Out
<hr>
<ul class="list2">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</div>
EDIT: what i want is to have all the links automatically be in a row if the screen size is smaller, if I add lg, md, sm three of my links are still in one row.
JS Fiddle: https://jsfiddle.net/61kc2hjx/
<div class="row">
<div class="col col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4"></div>
</div>
The .col div will have full width by default. But as the screen gets larger, the col width will decrease progressively. JSFiddle
Edit #1 :
<div class="col-12 col-md-8">
<div class="list1 row">
<a class="col col-4 col-md-12">Home</a>
<a class="col col-4 col-md-12">FAQ</a>
<a class="col col-4 col-md-12">Contact</a>
</div>
</div>
JSFiddle
This is what I understood from your explanations. But I hope you get the idea.
I am using Boostrap 3. Why the <div> with hidden-sm-down is still visible when I resize the page on my laptop? I want to hide those two images on small devices in order to have a different menu.
<div class="row">
<div class="col-md-7 left">
<ul class="row">
<li class="col-md-2">
Text
</li>
<li class="col-md-2">
Text
</li>
<li class="col-md-3">
Text
</li>
<li class="col-md-3">
Text
</li>
<li class="col-md-2">
Text
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down wave">
<img src="img/ondina.png" />
</div>
<div class="col-md-3 right">
<ul class="row">
<li class="col-md-6">
Text
</li>
<li class="col-md-6">
Text
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down right-border">
<img src="img/menu-right.png" />
</div>
</div>
Actually, hidden-sm-down won't work with Bootstrap 4 and above
(there use d-none instead of hidden-sm-down, and use d-sm-none instead of hidden-sm-up,
see also understanding-details).
With BS4, display utility classes are completely changed. Use this format instead;
.d-{breakpoint}-{value}
More information ; https://getbootstrap.com/docs/4.0/utilities/display/
As Jaqen said, if you use Bootrstrap 3, you should use hidden-sm instead.
Also, if you want to hide the image on small screen, you have to add hidden-xs.
Here's a JsFiddle : DEMO
You mention you use Bootstrap 3
Use hidden-sm instead of hidden-sm-down which belongs to Bootstrap 4
On a side note:
You also mention:
I want to hide those two images on small devices in order to have a different menu.
hidden-sm will hide the element on small screens such as iPad. To hide on extra small screens (such as Phones < 768px) add hidden-xs.
Take a look at the Bootstrap sizes table here
If you are using Bootstrap 4, you can utilize the following:
Hidden only on small screens
<div class="d-none d-lg-block">hidden on screens smaller than lg</div>
Visible only on small screens
<div class="d-none d-sm-block d-md-none">visible on small screens</div>
I've been asked by a friend to create a website.
I've used bootstrap 3 as a framework for the website and have hit a bit of a stumbling block.
My friend wanted a tabbed section where the background image of the section changes depending on which tab is active. I've been able to make it work for just the tab-pane using css, but I need to be able to change the entire section background and not just the tab pane.
I think it will require some JavaScript, but unfortunately my skills in that area a still a bit too weak to know how to do this, and google has been about as helpful as a hole in the head.
below is the section of html that i need the background image to change with each tab
<section id="about" class="content-section text-center">
<div class="row">
<div class="tab-content vertical-center">
<div id="aboutus" class="tab-pane fade in active">
<h2>...</h2>
<p>...</p>
</div>
<div id="history" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
<div id="chef" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 nav-pills-bg">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a data-toggle="pill" href="#aboutus">...</a>
</li>
<li>
<a data-toggle="pill" href="#history">...</a>
</li>
<li>
<a data-toggle="pill" href="#chef">...</a>
</li>
</ul>
</div>
</div>
Any help is appreciated
Put your separate css background images on these:
#aboutus {
background-image:.....
}
#history {
background-image:.....
}
#chef {
background-image:.....
}
I checked your code, all works fine and if you want change only contents background, Carol McKay wrote what you have to add in your code. You don't need in this case any javascript code.
I created small example with your code and bootsrap classes: jsfiddle-link
All gaps you can see depends bootstrap classes, for example, by default class .alert has:
.alert {
padding: 15px;
margin-bottom: 20px;
...
}
And one more example with content below pills and looks more familiar): jsfiddle-link2
I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).
I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?
Any help would be greatly appreciated.
Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment.
So for example:
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/pLskpufp/2/
You can also just use a center aligned container:
<div class="ui center aligned container">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/377v6ect/1/
I know it's not a pure Semantic UI solution, but for those of you looking for a way to do this with a fixed menu in Semantic UI, the best solution I've found so far is to wrap it in a div with a little custom CSS.
<div className="fixed bottom">
<div className="ui centered grid">
<div className="center aligned column">
<!-- Your Semantic UI menu here, but not fixed. -->
</div>
</div>
</div>
Along with this css...
div.fixed {
width: 100%;
position: fixed;
}
div.fixed.bottom {
bottom: 0;
}
div.fixed.top {
top: 0;
}
I have searched on the semantic forums and other places; created mine.. Hope works for you too.
<div class="ui center aligned container">
<div class="ui" style="background-color: #009999;">
<!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
<div class="ui centered small image" >
<a href="#">
<img class="logo" src="./logo_white.png">
</a>
</div>
<!-- </a> -->
</div>
</div>