Currently I am trying to use the newly added w3-bar class from w3.css to create a top navigation with some buttons and a logo.
If the navigation bar only consists of buttons, everything works fine, since the height of the buttons is the same everywhere.
Now when I try to add a logo to that navigation bar which is higher than the buttons, then the buttons are placed to the top of the bar.
<div class="w3-border w3-light-grey w3-bar" style="height: 80px">
<a class="w3-bar-item w3-button" href="#">Home</a>
<img class="w3-bar-item" src="http://lorempixel.com/200/56/">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a class="w3-bar-item w3-button" href="#">Link 2</a>
<a class="w3-bar-item w3-button w3-green w3-right" href="#">Link 3</a>
</div>
I would like to manage it to place the buttons in the vertical middle position so it looks way better.
I can manage this vertically centered buttons when i use w3-cell-row and w3-cell-middle like so:
<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">
<a class="w3-cell w3-cell-middle w3-button" href="#">Home</a>
<img class="w3-cell w3-cell-middle " src="http://lorempixel.com/200/56/">
<a class="w3-cell w3-cell-middle w3-button" href="#">Link 1</a>
<a class="w3-cell w3-cell-middle w3-button" href="#">Link 2</a>
<a class="w3-cell w3-cell-middle w3-button w3-green w3-right" href="#">Link 3</a>
</div>
But if i try to vertically center the buttons in the w3-bar navigation bar, i can't get it to work.
You can check this fiddle to see the two different results:
https://jsfiddle.net/TheChaos/o1cg5e64/
Does anybody know how to vertically center (and fill the navbar) completely with w3.css classes (or some additional css)?
i'm adding another answer as i believe the first answer to still be helpful for some readers.
https://jsfiddle.net/showcaseimagery/8r9bmgm3/
the .w3-bar-item of this CSS will do it, i've added the other two styles for optionals
.w3-bar-item {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#brand {
display: block !important;
padding: 0 !important;
}
img#brand {
height: 100%;
width: auto;
}
with the only alteration to the html as #brand
Here ya go, will this solve your issue?
https://jsfiddle.net/byxw86d1/
I've removed the inline-height from the parent div and added a .brand class to the image for styling. Having the navigation items large is better for small screen users, though you can set a breakpoint for that
<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">
.brand {
display:block;
height:auto;
width:100%;
margin-bottom:0 !important;
}
<!-- create full size image for larger screen OPTIONAL -->
.w3-cell-row {
display:block;
}
Related
I'm trying to make a navigation menu with tabs and I use negative margin to group the elements and I want the active element to stay over the inactive elements. I used position: absolute but it had no effect. How can I do this?
.nav-item {
margin: -40px;
}
.nav-link {
color: #F2BF5E !important;
font-weight: 700 !important;
}
.nav-link.active {
color: white !important;
font-weight: 700 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div style="margin-top: 10%" class="row">
<div class="col">
<ul style="display: flex; justify-content: center;" class="nav nav-pills nav-pills-warning" role="tablist">
<li (click)="teste('entrar')" class="nav-item" style="width: 200px;">
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
Entrar
</a>
</li>
<li (click)="teste('cadastrar')" class="nav-item" style="width: 200px;">
<a data-toggle="tab" class="nav-link" href="#link2" role="tablist">
Cadastrar
</a>
</li>
</ul>
</div>
</div>
Currently, this is what I have:
enter image description here
If I am understanding you correctly, you want an image to be on top of the other, and vice versa, based off of whether it is 'active' or not.
In this case, I would imagine using the z-index is what you would want. It is a CSS property that provides depth/stacking based off of an integer value.
.nav-link.active {
z-index:1;
position:absolute;
color: white !important;
font-weight: 700 !important;
}
You might have to modify your code a bit to get it to how you want exactly; I'm just trying to provide a concept. You can just toggle the z-index value based off of whether it is 'active'
I'd like to write something like that:
.block__element--modifier .blok {
/*styles*/
}
The thing is I don't know if above way is right in BEM methodology which I use. In practice I'm creating a navigation for website which is going to be opened by hamburger-button. When user click the button (and the navigation is closed and invisible) then menu is going to be show (and in main navigation block will be added the other navigation--opened class). Something like the following:
<nav class="navigation navigation--opened">
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="#">Link 1</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 2</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 3</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 4</a>
</li>
</ul>
<button type="button" class="hamburger">
<img src="obrazek.png" alt="Button to open menu" class="hamburger__icon hamburger__icon--opened">
<img src="obrazek.png" alt="Button to close menu" class="hamburger__icon hamburger__icon--closed">
</button>
</nav>
When the navigation--opened class exists that means the menu has been opened. So now I want to style opened menu. To make it I'm writing the follow:
.navigation--opened .navigation__list {
/*styles*/
}
.navigation--opened .navigation__item {
/*styles*/
}
.navigation--opened .navigation__link {
/*styles*/
}
I make it to style opened menu and its components.
Is .block__element--modifier .blok {/*styles*/} way proper in BEM? Thank you in advance for answer.
It's fine to style block's child elements by modifier of the parent block. So
.navigation--opened .navigation__list {
/*styles*/
}
.navigation--opened .navigation__item {
/*styles*/
}
.navigation--opened .navigation__link {
/*styles*/
}
is fine.
But it's better to avoid styling other blocks using nested selectors.
See https://en.bem.info/methodology/css/#nested-selectors for more info.
I created a navbar in Bootstrap and I want to make it a little bit smaller.
I somehow did that, but my content of the navbar is bigger then it should be.
I don't know how to make it smaller to fit in the navbar or should it fit auto?
Code:
<nav class="navbar-default">
<div class="container-fluid" style="padding-left:55px; height:45px;">
<div class="navbar-header">
<a class="navbar-brand" style="margin-bottom: 2px;"><i class="fa fa-facebook-square" aria-hidden="true" style="font-size:23px;" id="fb"></i></a>
</div>
<ul class="nav navbar-nav">
<li><input type="text" class="input-sm" id="usr" style="margin-top: 9px;" placeholder="Pronadjite prijatelje"></li>
<li id="nameprofile"><img src="fb%20profile%20image.jpg" width="25px" height="25px" style="margin-right: 9px;">Ime</li>
<li>Pocetna stranica<span class="badge">2</span></li>
<li id="liprijatelji"><i class="fa fa-users" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="findfriends"></i></li>
<li id="liporuke"><i class="fa fa-comments" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="poruke"></i></li>
</ul>
</div>
</nav>
Text in code is not in English because I don't speak English.
Sorry if I made a mistake.
Ok, guiding myself from the bootstrap tutorials, you would need to have <nav class="navbar navbar-default"> instead of <nav class="navbar-default">. One of the reasons of the unexpected behaviour might be because you´re not adding this class.
Since you are using the .navbar class, then all you need to do is add the following css that overrides the default values of navbar.
.navbar{
min-height: 50px;
height: 50px;
}
If you look at bootstrap defaul CSS the .navbar default values are:
.navbar {
position: relative;
min-height: 50px; //This line is the one that defines the min height, which we overrid in the code above
margin-bottom: 20px;
border: 1px solid transparent;
}
You might also need to add max-height to your css, since the container might grow if your content is bigger than your container.
Here is a working example
How do you change the text color for all navbar links including brand logo in Materialize css. I tries to add like 'black-text' but it only works for the brand-logo. For example,
<a id="logo-container" href="#" class="brand-logo black-text">
My Logo
</a>
<ul class="right hide-on-med-and-down black-text">
<li>Link 1
</li></ul>
Again 'black-text' only works for the logo.
In your css, add:
.black-text li a{
color: black;
}
alternately, you can add the "black-text" class directly to all the links you want to have black text.
example:
<ul class="right hide-on-med-and-down black-text">
<li><a class ="black-text" href=#">Link 1</a>
</li></ul>
I am wondering how i can create a sticky menu bar while scrolling using exclusively html codes. Is this even possible? Website of inspiration http://www.herschelsupply.com.
For clarification... My menubar is consisting of "Plånböcker" "Kundtjänst" "Om Oss".
My HTML code for the menubar is...
<nav id="main_navigation">
<ul class="row">{{! Highlight "All items" if we are on a list page and no navigation item is selected }}
<li class="column {{#list_page}}{{#no_current_navigation}}selected{{/no_current_navigation}}{{/list_page}}"> <a href="{{store_url}}/products">
{{#navigation}}
<li class="column {{#is_current}}selected{{/is_current}}">
<a href="{{url}}">
{{label}}
</a>
</li>{{/navigation}} {{#store_blog_url}}
<li class="column"> <a href="{{store_blog_url}}" target="_blank">
{{#lang}}Blog{{/lang}}
</a>
</li>{{/store_blog_url}}
<li class="column">
<li class="column"> <a href="{{store_url}}/Kundtjänst">
Kundtjänst
</a>
</li> <a href="www.wingmanstore.se/Kundtjänst" target="_blank">
</a>
</li>
<li class="column {{#about_page}}selected{{/about_page}}"> <a href="{{store_url}}/page/about">
{{#lang}}Om oss{{/lang}}
</a>
</li>
</ul>
<div id="search_container">{{search}}</div>{{! By using #is_current within a #navigation block we can find the currently selected navigation item }} {{#navigation}} {{#is_current}} {{! Render the submenu if it has any navigation items }} {{#children?}}
<ul class="child_navigation row">{{#children}}
<li class="column"> <a href="{{url}}">
{{label}}
</a>
</li>{{/children}}</ul>{{/children?}} {{/is_current}} {{/navigation}}</nav>
</header>
Your question doesn't really make sense, since HTML is fairly useless without some direction from styles. For example, the site you referenced uses this to accomplish their sticky header:
#top-header-container {
position: fixed;
top: 0;
margin: auto;
width: 100%;
z-index: 98;
background: rgba(255,255,255,0.75);
height: 70px;
}
You can use that same type of styling by embedding a style tag in your HTML page.