I'm trying to have a custom nav-link indicator for the active link like [this][1] but i'm stuck on how I should go about it.
I was thinking about adding a custom div with the color but it doesn't make much sense to me since i'm trying to override the active class in bootstrap. How can I achieve this?
[1]: https://i.stack.imgur.com/9ZtP3.png
A quick fix would be to create a .current class. Then apply the current class to the link of the page that you are on.. Something like
CSS.
.current{
color:#09f;
border-top:3px solid #09f;
}
HTML - HOME PAGE (index.html)
<div class="topnav">
Home
ABOUT
SERVICES
EXTRA
</div>
Then on the next page you add the class to the next link. So for page 2 it will look like this
HTML - ABOUT (about.html)
<div class="topnav">
Home
ABOUT
SERVICES
EXTRA
</div>
Removed the current class from home link and added it to the second link. And on each page you add the class to the link of the page you are on.
Related
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
im new to HTML and im just trying to edit a template at the moment. A Sign Up button on an unordered list has thrown me.
Heres some info:
On the template i had to change the link to a form button in order to integrate it opening up a part of the account system... After i placed the form button there it turned out like this:
https://gyazo.com/82c807d59162ada63dcaeea69b2fd340
The old code looked like this:
<li>Sign Up Now!</li>
And the new code looks like this:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</a></li>
I also had to insert this into the footer in the code to integrate it:
<script type="text/javascript" src="#"></script>
I've taken the links out just for anonymity.
Also the bottom part of the list where it now says "Sign Up Now!" is supposed to be green and then turn to black on the mouseover.
The CSS files from the template are quite extensive though and the section with all of the .btn CSS parts is just a long unstructured list thats hard to make sense of. And on top of that i cant work out how to link the form button to the .btn part of the CSS.
Thanks in advance for any help :)
Your markup has an incorrect closing tag for <button>. It should be:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</button></li>
One alternative is to add your custom css at the end of the CSS file.
Thay way you could add this class:
.order-button{
/* Styles for button here */
}
.order-button:hover{
/* Styles for mouseover here */
}
Can someone please offer me some advice?
I'm trying to customise a website and its HTML Nav Menu. By default, the menu already highlights the current tab for all existing pre-built pages.
http://webservices.retrotorque.com
I've added a new page to the website - Website Design - and I've added a tab to the menu for that page. All fine. But I can't find a way of making that tab become highlighted for only when that page is viewed.
Here is the existing code for one of the default tabs, which works fine.
<li class="first <#tag:homesection /#>">
Home
Here's my code for the menu tab I've created for my new page:
<li class="levelone <#tag:webdesignsection /#> ">
Website Design
<li>
My problem is that I can't find where to define:
<#tag:webdesignsection /#>
So I may need to find another solution.
I've thought of another approach:
<li class="levelone active">
Website Design
<li>
This code does work, but only in so much as the tab is always highlighted, whichever page is being viewed.
Is there a way of wrapping this up in a 'conditional'? So that it only applies when viewing the websitedesign page. And I could have a non-active alternative, conditionally set up for when viewing any of the other pages.
Thanks.
i think you should put JQuery there that can addClass and removeClass active from li element.
there is for example
var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');
I'm new to Liferay 6.1. I am in need of a navigation portlet that can display child and grandchild links using the hover or onmouseover methods. I'm using the default navigation portlet in 6.1 but am unable to figure out how to configure it to also display grahdchild links when hovered over.
Would a task such as this require a custom navigation portlet? Or is the default portlet provided configurable?
Say I have a site structure much like below:
Home
Living Room
Couch
TV
Kitchen
The navigation portlet title would be Home with Living Room and Kitchen being the child displayed. While hovering over Living Room with Couch and TV will appear.
I've tried creating a hook much like the one seen here though to no avail.
Somehting similar to the methods uses for 3 Javascript > 3.1 jQuery as seen here
Update
I placed a ticket with Liferay regarding this issue I am having. Due to the pages not presenting the nested (level-2) navigation until the parent page/tab has been selected giving it the 'open selected' selector. If this level-2 navigation was generated in the HTML the hover css selector would be easily configurable through "Advanced Styling". Will update with resolution. See example below:
See below for visual representation:
NOTE: In this case there are two FIRST_LEVEL_OBJECT and one SECOND_LEVEL_OBJECT.
Instance where second FIRST_LEVEL_OBJECT is selected
<li class="">
<a class="" href="/group/ssc/ssc-hr-contact-list">FIRST_LEVEL_OBJECT</a>
</li>
<li id="aui_3_4_0_1_2072" class="selected ">
<a id="aui_3_4_0_1_2071" class="selected " href="/group/ssc/something-referral-program">FIRST_LEVEL_OBJECT</a>
</li>
Instance where first FIRST_LEVEL_OBJECT is selected and child SECOND_LEVEL_OBJECT is displayed
<li id="aui_3_4_0_1_2166" class="open selected ">
<a id="aui_3_4_0_1_2165" class="open selected " href="/group/ssc/ssc-hr-contact-list"> FIRST_LEVEL_OBJECT</a>
<ul class="layouts level-2">
<li class="">
<a class="" href="/group/ssc/test-gc-1">SECOND_LEVEL_OBJECT</a>
</li>
</ul>
</li>
<li class="">
<a class="" href="/group/ssc/something-referral-program">FIRST_LEVEL_OBJECT</a>
</li>
Here's the way to provide the functionality.
Add child pages to the parent page being displayed on the portlet.
Select Options
Select Configuration
Locate included-layouts configure for All and save - This enables the "layouts level-2" class to render in the HTML without the need for selection first.
Step 2
Select Look and Feel
Navigate to Advanced Styling
Add the following CSS:
li.open ul.level-2 a {
border: none;
background: #E1E1E1;
text-indent: 15px;
}
li.open:hover ul.level-2 {
display: block;
}
If you have more than 1 navigation portlet on the page this implementation will effect all navigation portlets. The only way to isolate 1 portlet to enable this functionality is to:
Select Options
Select Configuration
Locate Bullet Style configure for Arrows (default should be Dots) and save - This will change the HTML class from nav-menu-style-dots to nav-menu-style-arrows.
Back in advanced styling add .nav-menu-style-arrows in front of li.open:hover ul.level-2 as shown below:
.nav-menu-style-arrows li.open:hover ul.level-2 {
display: block;
}
NOTE: I am aware of the Add a CSS rule for just this portlet under Advanced Styling and it didn't seem to make a difference in this instance. I believe it's an underlying issue regarding the Portlet IDs being the same for each navigation portlets.
You have now added the hover CSS selector to a default navigation portlet!
I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.