This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
highlight the navigation menu for the current page
I'm working on a menu consisting of several DIVs, each with a unique CSS ID. The :hover selector has been used in CSS to try to give each div a different style when its corresponding page is being viewed, but it doesn't seem to be taking effect. My CSS and HTML can be seen in this JSFiddle. Basically, since these divs are being used to create a menu, I'd like the "active" class to be added to the div when its hyperlinked page is being viewed (when someone is on my "Home" page, I'd like the active style to be applied to the "Home" menu div).
#pagebuttonhome {
width: 130px;
height: 30px;
background-color: #ffe0e8;
position: absolute;
overflow: hidden;
left: 30px;
bottom: 0px;
font-size: 17px;
letter-spacing: 2px;
text-align: center;
line-height: 30px;
color: #dc2d18;
}
#pagebuttonhome:hover {
background-color: #dc2d18;
color: #ffe0e8;
height: 40px;
cursor: pointer;
}
#pagebuttonhome.active {
background-color: #dc2d18;
color: #ffe0e8;
height: 40px;
cursor: pointer;
}
<div id="pagebuttonhome">HOME</div>
I appreciate any help!
One way to get around it is to add a unique id to the body on each page. For example, <body id="homelink"> on the home page, <body id="aboutlink"> on your about page (if you have one) etc. Then, replace the #pagebuttonhome.active selector with
#homelink #pagebuttonhome,
#aboutlink #pagebuttonabout
and it will select and highlight the link for the page you're on without you needing to use javascript.
http://jsfiddle.net/MEnKR/11/
Related
I'm looking at this CSS menu https://codepen.io/StephenScaff/pen/bVbEbJ and it seems to do what I want apart from the '>' image/icon at the end of each menu option.
Is there a way to only show this image/icon if there is a submenu/flyout ?
I've worked it it is being added using
.sidebar-nav>ul>li>a:after {
content: "";
font-family: ionicons;
font-size: 0.5em;
width: 10px;
color: #fff;
position: absolute;
right: 0.75em;
top: 45%;
}
But I don't know how to only apply that to the menu entries with sub entries.
Thanks
You can add a class "has-sub-entries" to the links that should have it.
.sidebar-nav>ul>li>a.has-sub-entries:after {
}
so you remove the :after element on
.sidebar-nav>ul>li>a:after
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
I'm new to HTML and CSS and am trying to implement a navigation bar that sends the user to another part of my one-page website whenever they click on a link. I'm using anchors and reference links in order to achieve this. For instance, I'll have:
<a name="JR_Harrison_Target"></a>
and then use
[Introduction][1]
to go to that location on the page. The only problem is that when I click on the link, it sends me to the page with a large margin of pixels at the top browser from the previous section of my website. This happens whenever I click a link to any and all sections. Is there any way to adjust the position of the anchor that I'm scrolling to so I can set up the window accurately? Thanks!
Example of problem:
Try to play with this code:
HTML
<div class="menu">
1
2
3
4
</div>
<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
CSS
section {
height: 400px;
background: red;
border: 2px solid black;
}
.menu {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background: #fff;
color: black;
display: flex;
align-items: center;
opacity: .5;
}
.menu a {
margin: 0 20px;
}
JSFiddle: http://jsfiddle.net/8m0w2aon/8/
As you can see - in order to make links work properly - you need to place the id prop on the section you'd like to scroll to. You'll be just "teleported" to the beginning of the section.
Each section should have fixed height, and no element inside it should come out of it (for example a background image which is bigger than the section itself).
I would like to adjust the CSS code for the Fiore theme on Wordpress. My URL is theuniversalasian.wordpress.com. It is an upgraded premium wordpress account.
With the upgrade, I am able to edit the CSS, but a number of problems are happening. If you could help me with the code, I'd appreciate it!
I want to make a white background for the post texts. When I do that, it moves the date, comments, edit links on the left side. I would like those to stay up top near the post title ribbon. At the moment, the site does not show the changes I wanted because I keep fiddling with the code....
If possible, I'd like the white background for the text to have rounded corners....
The left column somehow loses the graphics....There should be a top cherry blossom graphic like the original theme (http://fioredemo.wordpress.com/), along with the rest of the ribbon image for the post titles.
I cannot paste the entire code here..., but hopefully you will know what I mean from the site...
For the first two, I'll work on the last now, you needed to locate the .entry-content class in your css file.
The first style I added was the background: #fff; which added the white background and then I added border-radius: 7px; which gives it rounded corners.
.entry-content {
color: #2b2b2b; /* changed to black font since you wanted a white background */
width: 300px;
padding: 10px;
border: 0 solid #000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
background: #fff;
border-radius: 7px;
}
For the third question, I am not 100% positive but since you removed the nav on your site I believe you removed the image as well. For some reason on the template page I can not find any styles when you inspect an element. The image is apart of the nav/header area so this is just my best guess.
EDIT: Moving the comment/date block around.
.entry-meta {
color: #333;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px;
position: absolute;
text-align: right;
text-transform: uppercase;
width: 150px;
top: 0;
left: 35%;
}
I am developing a website and I have trouble with legend field which is overlapping with the table fields. I had posted the code on http://www.daniweb.com/web-development/web-design/html-and-css/threads/351601.
I searched google for this kind of error but could not resolve it.
remove position: absolute; from the following css selector
#registerForm legend {
color: #999999;
float: left;
font-size: 1em;
left: 1em;
line-height: 1.3em;
margin: 0;
padding-top: 1.25em;
position: absolute;
width: 16%;
}
Demo at http://jsbin.com/ivoyi4
After removing the position:absolute It looks better in the Firefox but in the safari the word is wrapped to the next line i.e., "User" in the first line and "information" in the second line above the table. What I wanted is to push the user information to the left side where the table starts but it acts weird in firefox with the position as absolute.