I'm pretty new to css and my navbar looks really bad. I'm trying to play with the css but i get nothing better than the below picture. If i remove the .menu, icons get verticaly aligned;
Of course i've seen a lot of stackoverflow post on this topic and tryied lot of stuff, but again, could not get better than the below picture.
Here my react html code.
<ul className="menu">
<li>
<a href="https://discord.com/channels/#me" id="menu-item-41">
<img src={Discord} alt="discord" className="discord-logo"/>
</a>
</li>
<li>
<a href="www.twitter.com" className="page-scroll" id="menu-item-42">
<img src={Twitter} alt="twitter" className="twitter-logo"/>
</a>
</li>
<li>
<a href="#" className="page-scroll" id="menu-item-44">
TAG
</a>
</li>
<li>
<a href="#roadmap-title" className="page-scroll" id="menu-item-43">
ROAD MAP
</a>
</li>
<li>
<a href="#team" className="page-scroll" id="menu-item-45">
TAG2
</a>
</li>
<li>
<button onClick={() => this.connect() }
id="menu-item-47"
className="connect-button">CONNECT
</button>
</li>
</ul>
Here my css :
li.menu-item {
margin-bottom: 40px;
vertical-align: middle;
text-align: center;
}
.menu{
position: left;
display: inline-flex;
text-align: center;
vertical-align: middle;
float: left;
margin: 40;
}
Eny suggestions or observation would be super welcomed !
Try changing your css to this
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to make products catalog with React and CSS. Everything seems to be okay except last row of products.
The last row has only 1 element and since the flex-grow: 1 is set, it takes up all the available width.
Is it possible to set the same width for all elements in the row?
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.products__product {
flex: 1 0 20%;
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
background:grey;
}
<div class="products">
<div class="container">
<div class="products__content">
<ul>
<a class="products__product" href="/products/21/stone-in-the-night"
><li><h1>Stone in the Night</h1></li></a
><a class="products__product" href="/products/21/the-dying-of-the-spirits"
><li><h1>The Dying of the Spirits</h1></li></a
><a class="products__product" href="/products/21/the-beginnings-guardian"
><li><h1>The Beginning’s Guardian</h1></li></a
><a class="products__product" href="/products/21/death-of-light"
><li><h1>Death of Light</h1></li></a
><a class="products__product" href="/products/21/the-lost-soul"
><li><h1>The Lost Soul</h1></li></a
><a class="products__product" href="/products/21/first-husband"
><li><h1>First Husband</h1></li></a
><a class="products__product" href="/products/21/verzliaraktis"
><li><h1>Veržliaraktis</h1></li></a
><a class="products__product" href="/products/21/raktas"
><li><h1>Raktas</h1></li></a
>
</ul>
</div>
</div>
</div>
You can always set the initial width to a percentage:
.products__product {
...
flex: 0 0 20%
...
}
The above says, do not shrink nor grow the items, but set it to 20% of the width of the container. So even if you have a single element in the container, it will only occupy 20%. You can adjust based on the number of elements you have. Unfortunately, you can't use fractional notation.
You could just set the width of the products__product class if you want to keep them uniform.
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
.products__product {
width: 30%; // 3 per row
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
}
}
How about this?
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.products__product {
flex: 0 0 20%;
min-width: 20%;
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
background: red;
}
<div class="products">
<div class="container">
<div class="products__content">
<ul>
<a class="products__product" href="/products/21/stone-in-the-night">
<li>
<h1>Stone in the Night</h1>
</li>
</a>
<a class="products__product" href="/products/21/the-dying-of-the-spirits">
<li>
<h1>The Dying of the Spirits</h1>
</li>
</a>
<a class="products__product" href="/products/21/the-beginnings-guardian">
<li>
<h1>The Beginning’s Guardian</h1>
</li>
</a>
<a class="products__product" href="/products/21/death-of-light">
<li>
<h1>Death of Light</h1>
</li>
</a>
<a class="products__product" href="/products/21/the-lost-soul">
<li>
<h1>The Lost Soul</h1>
</li>
</a>
<a class="products__product" href="/products/21/first-husband">
<li>
<h1>First Husband</h1>
</li>
</a>
<a class="products__product" href="/products/21/verzliaraktis">
<li>
<h1>Veržliaraktis</h1>
</li>
</a>
<a class="products__product" href="/products/21/raktas">
<li>
<h1>Raktas</h1>
</li>
</a>
</ul>
</div>
</div>
</div>
I have a menu, with one of the menu items being a logo. I would like to center the menu so the logo item stays in the center of the page. The goal is to have a menu, split by a logo, that stays centered on the logo. The location of the logo is calculated by number of menu items / 2 + 1 and round down if needed. Example: with 6 menu items, logo is in spot 4; with 5 menu items, logo is in spot 3.
Complications: 1) menu items do not have a set width - this is meant to be responsive, and I am avoiding set pixel widths at every juncture, 2) I do not want to use JavaScript
EDIT: HTML
<ul class="nav-menu">
<li class="menu-item">
<a href="/link-1">
<span>Link 1</span>
</a>
</li>
<li class="menu-item-logo">
<div id="logo">
<a href="http://example.com/">
<img src="https://pbs.twimg.com/profile_images/581134293931548673/8R33fIjl.png"/>
</a>
</div>
</li>
<li class="menu-item">
<a href="/link-2">
<span>Link 2</span>
</a>
</li>
<li class="menu-item">
<a href="/link-3">
<span>Link 3</span>
</a>
</li>
</ul>
CSS
<style>
.nav-menu {
display: flex;
justify-content: space-between;
width: 85%;
}
.nav-menu .menu-item {
display: inline-block;
margin: .25rem 2rem;
text-align: center;
}
#logo {
max-width: 15vw;
}
#logo img {
width: 100%;
}
</style>
jsfiddle # https://jsfiddle.net/szamxv2u/
I have this list and I want to show this inline , I use list-inline class, but the result is not true .
I don't know why this happened . Thanks for any answer .
cshtml code :
<ul style="text-align: center; list-style-type: none; vertical-align: top;">
<li>
#foreach (var item in Model.SocialNetworks)
{
<ul class="list-inline" style="text-align:center;list-style-type:none;padding-top:15px;">
<li class="col-xs-3">
<a class="aFooter" href="#item.SocialLink">
<img class="img-responsive center-block socialIcon" src="#Url.Content(item.SocialIcon.ToString())" />
</a>
</li>
</ul>
}
</li>
</ul>
Result :
Remove the padding-top: 15px; at the inside <li> tag.
With running fiddle.
Try float left to li element
ie, li{ float: left;}
I have
<ul id="list">
<li>
<a href=''>1</a>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>3</a>
</li>
<li>
<a href=''>4</a>
</li>
...
<li>
<a href=''>10</a>
</li>
<li>
<a href=''>11</a>
</li>
</ul>
And with style looks like:
I wish to have double digit numers centred like single digits are. I've tried (separately):
#list li{
text-align: center;
align-items: stretch; // and center
margin-left: auto; //with margin right the same
left: 0;
}
But nothing seem's to do the trick
Set text-align to a:
#list li a{
text-align: center;
}
So we have the menu above. That I need to construct for a WordPress template. I have no idea how to make the hover and active states. Untill now I have this:
HTML (followed how WordPress will generate the code):
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li>
<a href="#" title="">
Home
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
</ul><!-- #menu-primary-navigation -->
</div><!-- .menu-primary-navigation-container -->
</nav><!-- #access -->
Then I have the CSS:
#nav-main {
width: 956px;
height: 44px;
border: 1px solid #a5a5a5;
background: url(images/bg-nav-main.jpg) repeat-x;
}
.menu-primary-navigation-container {}
#menu-primary-navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu-primary-navigation li {
height: 44px;
display: inline-block;
}
#menu-primary-navigation li a {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
line-height: 44px;
padding: 0 46px;
}
#menu-primary-navigation li a:hover {}
And this is all. Here I am stucked. Those slashes are the bad points of this menu.
Any ideas?
Make graphics that way:
Yellow represents transparent color.
Then add negative margin to <li> so they will be next to each other without spaces.
To make the active state you have to add some php to the menu to check the current site:
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li <?php if (is_page('home')) { echo "class='active'"; }?> >
<a href="#" title="">
Home
</a>
</li>
<li <?php if (is_page('menulink')) { echo "class='active'"; }?> >
<a href="#" title="">
Menu Link
</a>
</li>
For more information read this tutorial here: Tutorial
Then you have to make rectangular images for each menubutton and define it for the <li> elements as a background. You can also make one for all menu elements. With the 'active' class, which get set up by wordpress, you can define a different background for the active menu element.
For the hover of the menu elements you just have to add a background definition in css for
#menu-primary-navigation li a:hover {}