I already finish my layout design. Now I want to include my design in Wordpress themes. I have a little knowledge in Wordpress because I just started learning it for about 1 week.
This is my template (not yet wordpress)
<ul class="nav navbar-nav">
<li class="active_link">TOP PAGE</li>
<li>COMPANY PROFILE</li>
<li>PRODUCTS</li>
<li>SERVICES</li>
<li>DOWNLOAD</li>
<li class="contact_us_link"><span class="fa fa-envelope"></span> CONTACT US</li>
</ul>
And what I did is I created them as a page so I have this code:
<ul class="nav navbar-nav">
<?php wp_list_pages('title_li='); ?>
</ul>
And it my last page there will be an envelope icon beside the text link and also it has a different background color.
I created this CSS for this:
#top-links-container .nav li:last-child {
border: 1px solid #FB7E7E;
background: #FB7E7E;
}
I got the background color but the text color didn't change.
I also tried this approach but all the text link is affected.
#top-links-container .nav li a:last-child {
color: #fff;
}
Is there a way that I can style a specific page link? How can I add the icon beside my last page link?
Based on your code:
#top-links-container .nav .contact_us_link a {
color: #fff;
}
You may also have to style the .fa if it's being overwritten by your other css.
Related
Ok why isn't this working, frustrating! I don't want there to be a border in my bootstrap menu once it's collapsed! I've tried everything but it's still there!
Here's my menu code:
Toggle navigation
German Magic Farm</span> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Meet Pam Bauer
</li>
<li>
Services
</li>
<li>
Sales
</li>
<li>
Clinics
</li>
<li>
Photo Gallery
</li>
<li>
Directions & Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
And here's the css: (works perfect in Developer tools, but this isn't working in actuality)
#bs-example-navbar-collapse-1 {
border-color: none!important;}
.navbar-inverse .navbar-collapse {border-color:none!important;}
Here's the link in the live site: Here's the link to live test site
It isn't working because "none" is not a color.
Try:
.navbar-inverse .navbar-collapse {
border-color: transparent; /* or white */
};
Or
.navbar-inverse .navbar-collapse {
border: none;
};
You should be able to set the border when its collapsed to show no color. This is the code I see in the DOM inspector
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
Alternatively you could set the border to 0 but that may cause a slight jump in the page transition.
Total Bootstrap newbie here (and still learning CSS) so big apologies if this is a dumb question...
I had constructed a Bootstrap nav bar with the last link as a button element but then realized it was better practice just to make it an anchor element instead:
<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Order Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Quote Request</li>
</ul>
</div>
The btn-primary styling no longer shows up now that it's nested in the link element though and I can't seem to write the CSS so that it 'sees' this styling and overrides the default styling on the div:
#tcsnavbar-links {
padding-right: 20px;
}
#tcsnavbar-links ul li a {
color: #5f5f5f;
}
#tcsnavbar-links ul li a:hover {
background-color: #eeeeee;
color: black;
}
.btn-primary {
background-color: #00afec;
border-color: #0296ce;
font-size: 1.1em;
}
.btn-primary:hover {
background-color: #0077c5;
}
If anyone can point me in the right direction it would be much appreciated, thx :}
I found your Problem interesting and started to read the Bootstrap docs and tried some things.
In my understanding it's not good practice to use the anchor element when you want a button. So when you want a button then use the button element.
Source
But in most cases it works fine and is also intendet to use the button classes on the anchor element. For example you want some Button anywhere on the page that links to the following page like a Next Button.
But not when you use it within .navbar-nav. The Docs explictly say
Context-specific usage
Like the standard button classes, .navbar-btn can be used on <a> and
<input> elements. However, neither .navbar-btn nor the standard button
classes should be used on elements within .navbar-nav.
Source
But what you can do is to use nav-pills for this one element like this. Then you have a buttonlike link in the navbar
<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav nav-pills navbar-right">
<li><button href="#" class="btn btn-primary navbar-btn" type="button">Quote Request</button></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Order Information</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
Bootply
I am trying to add image/Icon to bootstrap dropdown btn list options HERE
It works somehow but as you can see from the demo and following image the hover function does not reacting (highlighting)on the whole li area!
Can you please let me know how to fix this highlits all width of the li element?
Here is my code as well
CSS:
li.one {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 5px 7px;
width: 60px;
height: 25px;
}
and the HTML
<div class="btn-group">
<button class="btn span2">Select</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="one">Item 1</li>
<li class="two">Item 2</li>
<li class="three">Item 3</li>
<li class="four">Item 4</li>
<li class="five">Item 5</li>
<li class="six">Item 6</li>
<li class="divider"></li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Thanks
Using list item background as an icon is a bad idea since it makes laying on the text really tricky (as you experienced).
I'd definitely encourage you to add a new, separate element for the icons. By convention, icons are added in bootstrap in format <i class="icon-[name]"></i>. If you want custom icons, you can of course define your own classes and related CSS styles.
Here's a quick example:
HTML:
<li class="one"><i class="icon-custom-1"></i>Item 1
CSS:
.icon-custom-1 {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 0px 7px;
width: 60px;
height: 25px;
}
On a related note, you can wildcard all icon-* styles so you don't have to copy&paste the same stuff everywhere:
div[class*='icon-custom-'] {
/* Insert common CSS styles here */
}
Note that I'm using extra custom- to separate this custom icon formatting from icons provided natively by bootstrap.
Happy bootstrapping!
If you're simply looking to have the highlight extend to the right when hovered I would suggest removing the width: 60px; from each of your li.one, li.two etc.
Maybe add some extra margin on your li a selector as well to reduce the overlap.
Overall I would agree with jsalonen that you should look into utilizing the built-in icon code in Bootstrap.
I'm trying to change the colour of the active or current page navigation link which is selected by the user on my website. What am I doing wrong? Thanks.
So far the CSS looks like this:
div.menuBar
{
font-family: BirchStd;
font-size: 40px;
line-height: 40px;
font-weight: bold;
text-align: center;
letter-spacing: -0.1em;
}
div.menuBar li{list-style:none; display: inline;}
div.menuBar li a:active{color:#FF0000;}
div.menuBar ul{margin:0;}
And my HTML calls a page template for the navigation menu using the include PHP function:
<div class="menuBar">
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>SHOP</li>
</ul>
I think you are getting confused about what the a:active CSS selector does. This will only change the colour of your link when you click it (and only for the duration of the click i.e. how long your mouse button stays down). What you need to do is introduce a new class e.g. .selected into your CSS and when you select a link, update the selected menu item with new class e.g.
<div class="menuBar">
<ul>
<li class="selected">HOME</li>
<li>PORTFOLIO</li>
....
</ul>
</div>
// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; }
// more general CSS
li.selected a { color: #FF0000; }
You will need to update your template page to take in a selectedPage parameter.
The CSS :active state means the active state of the clicked link - the moment when you clicked on it, but not released the mouse button yet, for example. It doesn't know which page you're on and can't apply any styles to the menu items.
To fix your problem you have to create a class and add it manually to the current page's menu:
a.active { color: #f00 }
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>SHOP</li>
</ul>
Add ID current for active/current page:
<div class="menuBar">
<ul>
<li id="current">HOME</li>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>SHOP</li>
</ul>
#current a { color: #ff0000; }
I'm running a Wordpress site, and having some trouble getting the dropdown menus in Chrome to show up. My CSS is here: http://pastebin.com/v291BmHP
and the menu code is here:
<div class="menu">
<ul>
<li class="current_page_item">
Home
</li>
<li class="page_item page-item-2">
About Us
<ul class='children'>
<li class="page_item page-item-105">
History
</li>
</ul>
</li>
</ul>
It works fine in IE and Firefox. Thanks!
Take out display block in this rule:
#access ul li:hover ,
#access ul ul :hover {
color: #FFF; /* HOVER COLOR */
display: block; /* DELETE */
background-image: url('images/keating/nav_hover.jpg');
background-repeat: repeat-x;
}