I'm new to Semantic UI, and I'm trying to have some responsive text menu items on top of my page which are aligned to center of the page always. Here's the sample of my code.
<div class="ui text menu">
<a class="blue item" href="#">Home</a>
<a class="blue item" href="#">About</a>
<a class="blue item active" href="#">Contact</a>
</div>
I have tried to use grid based layout and many other approaches that are suggested on the Net, but all of them are related to compact menus which doesn't work on text menus.
Ended up using following code snippet:
<div class="ui relaxed grid">
<div class="five wide column"></div>
<div class="six wide column">
<div class="ui grid text menu">
<div class="five wide column">
<a class="yellow item" href="#">Home</a>
</div>
<div class="five wide column">
<a class="yellow item" href="#">About</a>
</div>
<div class="five wide column">
<a class="yellow item active" href="#">Contact</a>
</div>
</div>
</div>
<div class="five wide column"></div>
</div>
jsFiddle link
Basically, I created a grid wrapper over my menu and also wrap each menu item in a div. That gives flexibility on fixing right and left margins and also add some space if needed between each menu item.
Related
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.
I'm using bootstrap 4 in a web application for organizing topography measurements.
On one page, a plot of such a topography is shown in an <div class='tab-content'> element.
There are two navigation pills, "Plot" and "Properties", which allow to select the tab contents.
Here is a simplified version of the original markup:
<div class="container">
<div class="row">
<!-- The leftmost column contain a vertical navigation bar -->
<div class="col-md-1 mb-2 border-right">
<div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
<a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
</div>
</div>
<!-- Columns in the middle change depending on selected pill-->
<div class="col-8">
<div class="tab-content mt-2">
<div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
Some plot.
</div>
<div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
Some properties.
</div>
</div>
</div>
<!-- Rightmost 3 columns are a button area -->
<div class="col-3">
<div class="row p-3 pull-right">
<button class="btn btn-primary">
A button
</button>
</div>
</div>
</div>
And here is a fiddle, where you can see it in action.
The pills work, but my problem is that sometimes in my application (depending on the zoom level of my page) and also in the fiddle, the blue background of the selected pill overlaps with the border and with the tab contents:
Could someone give me a hint how to prevent the pills from overlapping, e.g. by CSS?
I would like to have the pills completely on the left of the vertical border.
leftmost column is overflowing the content because of col-1 , you can use bootstrap media query (xs, sm, md, lg, xl) for dividing columns.
<div class="container">
<div class="row">
<!-- The leftmost column contain a vertical navigation bar -->
<div class="col-md-3 col-4 mb-2 border-right">
<div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
<a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
</div>
</div>
<!-- Columns in the middle change depending on selected pill-->
<div class="col-md-6 col-8">
<div class="tab-content mt-2">
<div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
Some plot.
</div>
<div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
Some properties.
</div>
</div>
</div>
<!-- Rightmost 3 columns are a button area -->
<div class="col-md-3">
<div class="row p-3 pull-right">
<button class="btn btn-primary">
A button
</button>
</div>
</div>
</div>
</div>
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
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>
I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show a sidebar and the right column is used for current content.
I tried to copy and paste the demo page of Semantic-UI. The navbar is 45px high. I noticed that the first 45px of main content is overlapped.
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
My current workaround is to add a 45px high placeholder after navbar.
<div style="height:45px"></div>
I'm pretty sure there are some good css style names can fix the content overlapping.
The solution is much simpler. You just need to add a padding to your main container:
<div id="navbar" class="ui fixed inverted main menu">
<!-- header content here -->
</div>
<div id="content" class="ui container">
<!-- main content here -->
</div>
And add in your CSS:
.ui#content{
// padding should be the same as header height
padding-top: 55px;
}
You have to wrap your page content in grid class:
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div class="ui grid">
<div class="row">
<div class="column">
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
</div>
</div>
</div>
What you could do is set a height on the content div and then set overflow:scroll. This way any long content will scroll in the div and it won't move up the page and under the nav bar.