Unfortunately it looks like you can't hide link text with CSS. On my WordPress site, at 375 px and below, the titles of the links in the secondary-navbar start to overlap.
Please see for yourself
What I'm trying to do is to say "as soon as the titles start to overlap (at 375px and below), make the titles disappear." I'd also like to make the glyphicons larger and centered.
Here's a link to my header.php file. I didn't write the code for this site and am not very familiar with the wp_nav_menu function, but I would guess that it's probably line 62 that's causing the menu titles to appear in the div with the nav navbar-nav secondary-links class.
So then, if that is the problem, how do we get that specific part of the function to disappear at 375px and below?
I tried commenting out line 62 and got a pretty bad result:
Please point me in the right direction if you have any suggestions / ideas. Maybe there's a way to disable the titles with JQuery? Thank you.
Here is the solution put it in the end of the stylesheet file.
#media only screen and (max-width:480px) {
.secondary-navbar .navbar-nav > li > a{font-size:0px;}
.secondary-navbar .navbar-nav > li > a:hover{font-size:0px;}
.secondary-navbar .navbar-nav > li > a span{font-size:20px!important;}
}
Related
(I use bootstrap 3.3.7 on this one)
Hi. I wanted to have the effect on my bootstrap navbar, that in wherever section the user is (I use tags on my One-Page site), the text in the navbar is highlighted automatically just by scrolling. I already set up the dropping anchor links...
So with this additional attributes to the body tag it's working great so far
<body data-spy="scroll" data-target=".navbar-collapse">
...but there is one Problem. I ONLY want the TEXT in the navbar to seem active, highlighted. But as you can see on the picture (upper example), there is this kinda box now around the highlighted navbar link. It came from nowhere. How can I get rid of it, so only the text color is a bit lighter when it's active?
Look on the image here. The upper example is the problem now, and the bottom one is how I would like it, but with using scrollspy. So not that black box.
Greets and thanks a lot in advance my friends
You need to change the active state of the <a> tag to have a background of none. Bootstrap adds the class of active to the li containing the link when you scroll with scrollspy. So it would be something like the following:
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
background:none;
}
In the example above I included the hover and focus states as well but if you want to change those you can do on your own also by the colors in your image I am assuming that you are using navbar-inverse if you are using something else like navbar-default you will have to change that accordingly.
I am building a website for friends of mine and I stumbled upon a bug that I can't figure how to get rid of and I created an "About Us" section on the home page, and the "About Us" button in the header menu links to an anchor right above this section.
However, the hover effect for the "About Us" button is always triggered on the home page (screenshot bellow)
Hover_effect_bug
After inspecting the element, I figured that the bug might happen because of the "current_page_item" class (a default wordpress class), but I couldn't find why it would trigger the hover effect (here is what I could find about the class effects) :
.main-navigation li li.current_page_item a:hover,
.main-navigation li li.current_page_item a:focus,
{
color: #fff;
}
.navigation-top .current_page_item > a
{
color: #767676;
}
Any idea what causes this to happen ?
Thanks in advance for taking the time to read and answer if you can!
I wish you a pleasant day !
thank you for your answers, for some reason mail notification were disabled so I didn't see that you did ^^'.
I searched more, and I found out that my first hypothesis was wrong : it was the current-menu-item class that bugged. I simply disabled it and everything was fine. I still don't know the exact reason why it was a problem in the first place, however.
You can find a live version of the website here : www.euro-batim.fr
(the current-menu-item still exist in the style sheet, however, I turn it into commentaries). If anyone is interested, I can do some extra digging to find what exactly created the problem.
Have a nice day !
I have an image slider on a website I am currently working on:
http://scientized.com/ (first part on the main page)
As you can see it works beautifully. Now I am trying to put the same image slider on a page:
http://scientized.com/mathematics/
As you can see it becomes slightly misaligned. The images do not slide edge to edge. I have been at for some hours now and cant seem to find where the problem is occurring.
It is a wordpress site, and the slider is a widget I've been working on.
All content is currently dummy content - don't read too much into it.
Anyone can spot the error in my css code?
Your ul has a margin on it on the faulty page. Change to this ...
.entry-content ul {
margin-left: 0 ;
}
But be aware it will affect other ul on Wordpress pages. Target a different class if possible.
EDIT: it's in your code as .entry-content ul ul
EDIT 2: you can target .slides, like this:
.slides {
margin-left: 0;
}
It being two days and i am punching my head due to IE 7 and IE 8. When my web site (built in drupal) is loaded, it shifts to right side. Link is below :
http://goo.gl/GkMF6Z
I applied overflow hidden etc, but nothing is working and the page still moves to right side.
I need help to fix this issue.
Thanks in advance.
Note: If someone give me details for a fix and it worked, i will offer a bounty of 50 points to correct answer after two days.
Looks like.. problem is with your doctype declaration. Can you check that once?
I got the issue
Issue is with your #menu #naviagtion_menu li ul try making that display:none and everything will be fine. Menu has position:absolute; left:-999em which is creating space. Try playing with display properties instead left.
Solution :
#menu #naviagtion_menu li ul { left:auto; display:none;}
On hover of parent ul show this #menu #naviagtion_menu li ul with jquery/ javascript like you are doing with position left.
I have a "mega menu" that contains a .png that's supposed to hide after the user mouses off the menu. It works as expected in IE but not Chrome - it leaves the areas of the picture that hang out past the menu.
As per Sparkys suggestion, here's the JSFiddle
Here's a link to my development folder:
http://libertyeaglearms.com/dev/
here's a direct link to my css:
http://libertyeaglearms.com/dev/assets/menu.css
I think i t might have to do with line 6
.megaCreator a img{
display:block;
position:absolute;
bottom:-50px;
right:-50px;
max-width:550px;
outline:none;
border:none;
background:none;
}
but, I'm not sure.
If I need to post the code directly here I will, I'm not sure exactly where the problem lies so viewing all the css via the actual sheet, I feel ,would be better.
Here's a couple of screen shots showing the issue:
Here's the mouse over:
Here's the mouse out:
NOTE: I'm not using any javascript for the menu, in case the question comes up!
Thanks :)
HERE'S THE WORKING CODE -> JS FIDDLE
One of those rules is overwriting the overflow:
.megaMenu-fade > li.megaMenu-drop:hover > div,
.megaMenu-fade > li.megaMenu-drop:hover > ul,
.megaMenu-fade > li > ul li.megaMenu-drop:hover > ul,
.megaCreator > li.megaMenu-drop:hover > div,
.megaCreator > li.megaMenu-drop:hover > ul,
.megaCreator > li > ul li.megaMenu-drop:hover > ul
See:
I worked with it a lot and i find out that it has nothing to do with css as i change the "img" tag display to none (after the part image stayed on page), but it still stayed on. My guess would be it must be chrome graphic renderer problem that could not handle such a thing as sometimes it just disappears. my guess is it would be chrome's fault and not yours and as still as you don't put an element (like a div) over that image, the problem still exists.