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;
}
I am new to html so please don't mind the terrible coding..
I've created a list of links on my page in wordpress, but for some reason the first few aren't clickable. They seem to be fine here, but on my page they suddenly stop working
Here's the part of my HTML having issues:
.parent {
text-align: left;
}
.parent > ul {
display: inline-block;
}
<div class="parent" style="text-align: left; margin-left:0 auto; margin-right:0 auto; position: relative; top: +0px; right: 10px;">
<ul style= "font-size: 20px;">Public Open Sessions:
<li style="font-size: 16px;"><a href="http://shopkts.com/collections/training/products/3-day-uem-public-open-session-april-11" target="_blank" !important>April 11-13, Mississauga, Canada</a></li>
<li style="font-size: 16px;">April 18-20, Atlanta, USA</li>
<li style="font-size: 16px;">April 25-27, Calgary, Canada</li>
<li style="font-size: 16px;">May 2-4, Vancouver, Canada</li>
<li style="font-size: 16px;">May 9-11, Philadelphia, USA</li>
<li style="font-size: 16px;">May 16-18, Washington, DC, USA</li>
<li = style="font-size: 16px;">May 23-25, Dallas, USA</li>
</ul>
</div>
What's strange is the the first 3 links won't work, while the next 4 do. But if I move it to another part of the page, it suddenly works. Is it due to something else on the page?
Here is the full html incase it's needed:
.parent {
text-align: left;
}
.parent > ul {
display: inline-block;
}
<p style="text-align: center; font-size: 40px; color: black"> BlackBerry Open Sessions</p>
<p style="text-align: left;"><img class="alignnone size-full wp-image-1950" src="http://www.ktsglobal.ca/wp-content/uploads/2016/06/ps-1-e1478718264230.png" alt="ps" width="1766" height="569" /></p>
<p style="text-align: left; line-height:2px">Our public open sessions consists of instructor-led training and hands-on virtual labs. Participants will learn to Plan, Deploy and Manage BlackBerry UEM or BES12</p>
<p style="text-align: left; line-height:2px">with one of our certified instructors. Make sure to check back regularily to see our updated list of events.</p>
<hr />
<p style="text-align: center; font-size: 24px;"><img class="wp-image-1922 alignleft" src="http://www.ktsglobal.ca/wp-content/uploads/2016/11/shutterstock_196196186-e1478532776565.jpg" alt="shutterstock_196196186" width="505" height="346" /> Upcoming Public / Virtual Events:</p>
<p style="text-align: center; font-size: 18px;"></p>
<div class="parent" style="text-align: left; margin-left:0 auto; margin-right:0 auto; position: relative; top: +0px; right: 10px;">
<ul style= "font-size: 20px;">Public Open Sessions:
<li style="font-size: 16px;"><a href="http://shopkts.com/collections/training/products/3-day-uem-public-open-session-april-11" target="_blank" !important>April 11-13, Mississauga, Canada</a></li>
<li style="font-size: 16px;">April 18-20, Atlanta, USA</li>
<li style="font-size: 16px;">April 25-27, Calgary, Canada</li>
<li style="font-size: 16px;">May 2-4, Vancouver, Canada</li>
<li style="font-size: 16px;">May 9-11, Philadelphia, USA</li>
<li style="font-size: 16px;">May 16-18, Washington, DC, USA</li>
<li = style="font-size: 16px;">May 23-25, Dallas, USA</li>
</ul>
</div>
<div class="parent" style="margin-left:0 auto; margin-right:0 auto;position: relative; top: -238px; right: -380px;">
<ul style= "font-size: 20px;">Virtual Sessions:
<li style="font-size: 16px;">March 29-31</li>
<li style="font-size: 16px;">April 12-14</li>
<li style="font-size: 16px;">April 26-28</li>
</ul>
</div>
<p style="text-align: right; font-size: 20px; position: relative; top: +0px; right: 10px;">Click the training session you'd like to join to see more and sign up.<p/>
<hr style="position: relative; top: -30px;"/>
<img class="wp-image-1949 alignright" src="http://www.ktsglobal.ca/wp-content/uploads/2016/06/las-vegas-signs-clouds-blue-sky-1920x1080-e1478718166731.jpg" alt="las-vegas-signs-clouds-blue-sky-1920x1080" width="486" height="392" />
<p style="text-align: center; font-size: 24px;">Coming Soon</p>
<p style="font-size: 18px;">We are planning a special 3-day BlackBerry UEM training event in Las Vegas.</p>
<p style="font-size: 18px;">The training will focus on some new and exciting features of BlackBerry UEM.</p>
<p style="font-size: 18px;">Feel free to contact our team for more information. We hope to see you there!</p>
<hr style="position: relative; top: 20px; width:100%;"/>
<p style="text-align: center;font-size: 20px"><strong><span style="color: #0020c2;">Contact us for more info</span></strong></h4></p>
It looks like a mess but trust me, it works on the page.
Here's a link to the page
Any help would be great, thank you in advance!
Think I found it.
Try this:
.parent {
overflow: auto;
}
Your second "parent" div is covering up your links. Your code is actually really basic, so this probably isn't the best way to solve it, but it will work for you at this point.
I tried it and it worked fine, even in your webpaged link above. I don't see any problem. However, I found a typo (?) in the last <li>
<li = style="font-size: 16px;">
It should be:
<li style="font-size: 16px;">
I have a bunch of links on the top and bottom of my page. I'll align the links will look aligned in Chrome but when I check out the page using Firefox the links are not in the same position they've moved down a few spots. This is driving me nuts.
here is the link to my webpage
The CSS for the bottom links
#navbot {
color:silver;
white-space:nowrap;
text-align:left;
position:relative;
top:50px;
left:36px;
}
#navbotS {
color:silver;
white-space:nowrap;
text-align:left;
position:relative;
top:48px;
left:44px;
}
#navbotimg {
top:0px;
clear:both;
float:left;
position:relative;
left:168px;
}
#navbot2 {
position:relative;
min-width:800px;
white-space:nowrap;
color:silver;
top: 10px;
left:190px;
}
#navbot3 {
position:relative;
min-width:1380px;
white-space:nowrap;
color:silver;
top: -8px;
left:158px;
}
#mails li {
float:right;
list-style:none;
margin:0 205px 0px -999px;
}
The HTML
<div id='navbot'>
<a class="ex2" href="#" >PERFORMANCE </a>
</div>
<div id='navbotS'>
<a class="ex3" href="#">SPORTSWEAR </a>
</div>
<div id ='navbotimg'>
<img src="MAIN_IMAGES/red_line.png" width="8" height="60"> </div>
<div id ='navbot2'>
<a class="ex1 various11" href="FOOTWEAR_SUB_PAGES/NIKE_SNOW.html">ZOOM FORCE ONE ///</a>
<a class="ex1 various1" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html">MERCURIAL SUPERFLY ///</a>
<a class="ex1 various2" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html">AIRMX MOTO BOOT ///</a>
<a class="ex1 various3" href="FOOTWEAR_SUB_PAGES/le-coq-joakim-noah.html">JOAKIM NOAH ///</a>
<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/NIKE_BMX.html">DUNK GYRIZO</a>
</div>
<div id ='navbot3'>
<ul id="mails">
<a class="ex1 various5" href="FOOTWEAR_SUB_PAGES/NIKE_AIRMAX_90.html">AIRMAX 90 ///</a>
<a class="ex1 various7" href="FOOTWEAR_SUB_PAGES/SUB_PAGE_CORTEZ_FLYMOTION.html" >CORTEZ FLY MOTION ///</a>
<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/sub_page_org.html">ORIGINALS ///</a>
<a class="ex1 various8" href="FOOTWEAR_SUB_PAGES/SUB-PAGE-ARTHUR_ASH.html">ARTHUR ASHE ///</a>
<a class="ex1 various9" href="FOOTWEAR_SUB_PAGES/SUB_PAGE_STUSSY_DUNK_TRAINER.html">STUSSY DUNK TRAINER ///</a>
<a class="ex1 various10"href="FOOTWEAR_SUB_PAGES/SUB_PAGE_AIR_MAX_1.html">AIR MAX I MAXIM</a>
<li><a class="mails" href="mailto:info#ernsteverything.com">INFO#ERNSTEVERYTHING.COM         </a></li>
<li><img src="MAIN_IMAGES/mail_2.png" width="28" height="18" border="0" ></li>
</ul>
</div>
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 {}
I was just going through a website code, and I saw an image for Social Networks link
When I see the website, I only see the top row of the images. It means the darker top three images.
The issue is when my mouse hovers over the facebook image, only facebook image becomes the light facebook image, and same happens for the other two links as well.
The code they have used is given below
<ul class="social-icons">
<li class="facebook">
<a title="Facebook" href="http://facebook.com/eclyptix">Facebook</a>
</li>
<li class="twitter">
<a title="Twitter" href="http://twitter.com/eclyptix">Twitter</a>
</li>
<li class="linkedin">
<a title="LinkedIn" href="http://linkedin.com/company/eclyptix">LinkedIn</a>
</li>
How is this done.
Your help is appreciated.
Thank you
Zeeshan
# Zeeshan; it's called sprite
check this article for more http://css-tricks.com/158-css-sprites/
check this example http://jsfiddle.net/sandeep/F4wpW/
This is CSS Sprite. Refer to article to make it happen.
You can set the background image position and crop it by setting width/height in the css file.
//HTML
<ul class="social-icons">
<li class="facebook">
<a title="Facebook" href="http://facebook.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
</li>
<li class="twitter">
<a title="Twitter" href="http://twitter.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
</li>
<li class="linkedin">
<a title="LinkedIn" href="http://linkedin.com/company/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
</li> </ul>
//CSS
.facebook{
background:url(http://i.stack.imgur.com/LNPd7.png) 0px 0px no-repeat;
width:30px;
height:30px;
}
.facebook:hover{
background:url(http://i.stack.imgur.com/LNPd7.png) 0px -30px no-repeat;
}
.twitter{
background:url(http://i.stack.imgur.com/LNPd7.png) -30px 0px no-repeat;
width:30px;
height:30px;
}
.twitter:hover{
background:url(http://i.stack.imgur.com/LNPd7.png) -30px -30px no-repeat;
}
.linkedin{
background:url(http://i.stack.imgur.com/LNPd7.png) -60px 0px no-repeat;
width:30px;
height:30px;
}
.linkedin:hover{
background:url(http://i.stack.imgur.com/LNPd7.png) -60px -30px no-repeat;
}
Here is the working example http://jsfiddle.net/kayadiker/uuKzQ/