I'm very new to CSS and Bootstrap.
I have large brand image (logotipo-white), and I want to resize it to 30% of its original size. However, when I apply the following code the image appear small but still occupies the original space, pushing the nav links to another line.
How can I solve this?
HTML:
<body>
<div class = "navbar navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
<ul class = "brand"><img src="images/logotipo-white.png"></ul>
<ul class = "nav">
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
body{
background-image:url('../images/bg-green.jpg') ;
}
.brand img{
max-width: 30%;
}
in the html don't use an ul for your brand as this is not needed, use an a-tag instead:
<a class="brand" href="#"><img src="images/logotipo-white.png" /></a>
and to solve your issue, in css do the following: CSS:
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
If it's built with bootstrap, then everything is placed within Spans. Trying making the span it is in smaller.
You shouldn't use <img> directly inside <ul>.
The markup could be like this :
<ul class = "nav">
<li class="brand"><img src="images/logotipo-white.png"></li>
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
Or this :
<ul class = "brand"><li><img src="images/logotipo-white.png"></li></ul>
<ul class = "nav">
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
or this :
<div class = "brand"><img src="images/logotipo-white.png"></div><!--make me float/display:inline-block/other -->
<ul class = "nav">
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
In Joomla! 3 template css add max-width: 80% to .brand line 7137
.brand {
color: #001a27;
max-width: 80%;
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
transition: color .5s linear;
}
Related
I am newbie with html css and here is my problem.
I code a nav and subnav at html file as this one
<div id="header">
<!-- begin nav -->
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<!-- end nav -->
<!-- begin search-->
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
<!-- end search-->
</div>
And I want to make a block with color grey at block Merchandise, Extras, Media.
Here is my code at styles.css
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
min-width: 160px;
top: 100%;
left: 0;
}
My problem is, when I click to Merchandise, for example, the grey is not display fully all the block as I want. Here is the design
But here is what I got
As you can see in the second picture, the block become fell in.
I thought that I can use display: inline-block; to solve this problem , but when I add this command to #nav .subnav, it does not solve this problem.
They said that, I can use at #nav .subnav this command min-width: 160px;, but it still not well.
Could you please give me some ideas for this problem?
Thank you very much for your time.
I think you should give width:100% of ul tag.
<ul class="subnav" style="width:100%;">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
I have a menu on my website which is situated like this,
header>.container>nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left
}
What I am trying to do is relocate nav inside of a new element within the structure called topLine, and so my new code is,
header.container.clearfix.topLine.nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left;
background-color:#282b30;
}
However it is not working and I am not sure what I am missing.
The HTML code is below
<header>
<div class="container">
<div class="topLine">
<!--MENU-->
<nav class="clearfix">
<i class="fa fa-bars"></i>
<ul class="list-inline">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Companies</li>
<li>News</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
i would have posted a comment but i don't have enough xp yet. :)
some periods that you have in your css should't be there. Periods are for referencing a class. for example, i see a .nav but you don't have a class="nav" anywhere in the html. if you want to refer to a child element, use >. So instead, do header > .container > .clearfix > .topLine > nav {
I am developing a small app and have now to deal with the front end part of it. I am using bootstrap for it. For the navbar part, I am using nav-pills navbar, and I want it stretched to 100%. My navbar code:
<div class="navbar navbar-static-top" >
<div class="navbar-inner">
<ul class="nav nav-pills" >
<li >Home</li>
<li>Some</li>
<li>Items</li>
<li>Here</li>
<li>Register</li>
<li>Login</li>
</ul>
</div>
</div>
Now the css part:
.nav-pills{
margin-top:20px;
width:100%;
}
.nav-pills > li {
float: left;
}
Now if i change the 100% in nav-pills to say 1366px, it works. But when I scale it to 100%, the navbar is not stretched. I tried giving the width of .nav-pills > li to 25%, trying with just 4 tabs. That also gives the perfect result. But since the number of tabs vary from page to page, I don't want to fix the size of the .nav-pills > li class. I want to stretch the navbar to full width. What is that I should do?
Bootstrap 3 has a nav-justified class that does exactly what you want (at screens wider than 768px, on smaller screens the nav links are stacked).
Just add it to your .nav like this:
<ul class="nav nav-pills nav-justified">
<li >Home</li>
<li>Some</li>
<li>Items</li>
<li>Here</li>
<li>Register</li>
<li>Login</li>
</ul>
Demo fiddle
nav-pills nav-justified items not width fixed.
For this case:
HTML
<div class="gridProducts_box">
<ul class="nav nav-pill">
<li class="gridProducts_box__items">
One
</li>
<li class="gridProducts_box__items">
Two
</li>
<li class="gridProducts_box__items">
Three
</li>
<li class="gridProducts_box__items">
Four
</li>
<li class="gridProducts_box__items">
Five
</li>
</ul>
</div>
CSS
/* nav tabs fixed wodth */
.gridProducts_box > ul.nav.nav-pills {
display: table;
width: 100%;
table-layout: fixed;
}
.gridProducts_box > ul.nav.nav-pills > li {
float: none;
display: table-cell;
}
.gridProducts_box > ul.nav.nav-pills > li > a {
text-align: center;
}
.gridProducts_box__items {
width: 100%;
}
Demo
HTML :
<nav class="header"> <img src="smiley.gif" class="logo">
<ul class="navigation">
<li id="a" class=""><span></span>A
</li>
<li id="b" class=""><span></span>B
</li>
<li id="account" class="right"> <span></span>Test Test
<ul class="dropdown">
<li>Log out
</li>
</ul>
</li>
</ul>
</nav>
From a previous question I was told to use inline-block to get the list to sit on the same line as the image (logo). however when I make the image the full height of the header it still drops the list down. What am I doing wrong?
JSFiddle
Change in .navigation class position from relative to absolute.
.navigation {
position: absolute;
display: inline-block;
z-index: 1000;
}
fiddle
I have my navbar of links and when the user is on a page that corresponds to one of the links I want to change the background color of that link. For example, when the user is on the home page I want to change the background color of the home link. I tried with #navbar li a:current but that doesn't work.Is this possible with css?
html:
<div id="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
CSS:
#navbar li a.current {
background-color: #FFF;}
Your CSS is wrong. It should be #navbar li a.current {
background-color: #FFF;} You had a colon after a:current.
Your HTML should be like this:
<div id="navbar"><ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
<div id="navbar">
<ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
Now create a background color for the class of "current". You'll have to apply that class with the backend logic. CSS cannot workout the logic by itself. It only handles the styles
You could use javascript(jQuery) like this:
var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
If you want to accomplish this only with CSS, maybe you can use the parent's IDs:
<div id="parent1">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
<div id="parent2">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
And then...
#parent1 li.home {
background: red;
}
#parent2 li.home {
background: black;
}
You could do this using Javascript/JQuery (although a server-side approach is probably better):
var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");
The above requires JQuery, but you can do something similar in pure Javascript:
var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
targets[0].parentNode.style.background = "#FFF";
}
(Fiddle)
Offcourse it is possible with pure css3. You could give an id to all your 'li' s.
like ,
li id="sample"
then modify your anchor to
a href="index.html#sample"
use CSS :target selector
li:target{
// apply your styles here
}
simple