Responsive hover content div into different position - javascript

here is my responsive parallax site i’m working on with Concrete5 Bootstrap theme
–> http://testi4.aada.fi/ and there is BUSINESS GROUPS content area in frontpage.
that’s what i’m working on right now.
Now hower image with content opens over div with content (list)..
Now customer wants that hover div opens below image div with list as a content..
http://testi4.aada.fi/files/8214/1744/4748/sample.png
How do i do this??
// Mika

Add a hover class to your li.dropdown
.navbar-nav li.dropdown {
display: block;
}

Related

Taking nav button out from hamburger menu

I'm building a semi-progessive top navigation bar.
In the mobile viewport, it would only show logo and hamburger button.
(As you click the button, several navigation menu will come out as well as Log in and Sign up)
-------------------------------
Logo =
Once user hits the tablet viewport, I want Log in and Sign up menu to come out from the hamburger and stays beside the button.
--------------------------------------------
Logo LogIn SignUp =
The menus are tagged as li, of course under ul tag.
I was thinking about getting rid of li tag from those two buttons and take them out from ul, but I have no idea how to do so:(
Any help would be very appreciated.
Add signuploginclass class name in signup and login li elements and then add the css code below in your stylesheet.
#media (max-width:500px){
.signuploginclass{
display: none;
}
}

can't change hover color on image/icon

I created a circle icon and added an image in the center. I wan't the image to change colors on hover. The only real part of the icon is the circle. I have tried adding hover in the code for the circle icon like:
.circle-icon a:hover {
color: #0cf;
background-image:url(../images/phone-icon-blue-sm.png)}
So in the above I am attempting to swap out the image on hover and trying to change the color by adding a line to the style sheet. I am not sure that I can even do what I want without creating a rollover using javascript, which I am not thrilled about. The demo page is at:
http://tahoe-luxury-properties.com/index2.html
The icon that I am having trouble with is the phone link at the bottom right of the page. The facebook, linked in icons are working great. Just not my home made icon. I might have some code that I can use, but need to search that out. Any help, ideas are greatly appreciated. Thanks, Beth
You can't set a new img src via CSS.
Or you use two background's, or two img's tags (one hidded, that show on hover and hide the other).
/* hide second image, hide first on hover */
#social-icon-menu a em > img:last-child, #social-icon-menu a:hover em > img:first-child {
display: none;
}
/* show second on hover */
#social-icon-menu a:hover em > img:last-child {
display: block;
}
By the way, I noticed that your theme contains FontAwesome, is much better using it, because it's a font icon, so you can just change his color, using color property via CSS.

Delay in bootstrap toggle menu

I have built a menu bar using bootstrap. In the responsive mode, when the toggle menu is activated, the menu list items comes up quickly while the background container comes with a delay. Similarly when the toggle mode is deactivated, the container disappears while the menu items disappear with a delay. I have uploaded a video of this issue here: Video
Kindly, please let me know how to solve this problem.
It is because your #custom-collapse in the main navigation section of your css has the overflow set to visible remove that and it should work fine.
#custom-collapse {
border: none;
box-shadow: none;
}
If you put the overflow to visible to remove the scrollbar you should maybe try
.navbar-collapse.in {
overflow-y: visible;
}

Remove bxslider

I have the District Theme and I really dislike the Portfolio Slider it has. I want to remove it so my Works show in a list instead of a slider.
I've tried the following css scripts but they dont work
/*Removing slideshow from portfolio and alignment*/
.single-portfolio .bxslider {
opacity: 1;
position:static;
}
.single-portfolio .bxslider li {
list-style-type:none;
margin:0;
}
I don't know how to remove the slider or where to find it. I want to keep it for other parts of the site but I don't want to use it on the portfolio and single-portfolio pages.
edit: Oh wait, did I misunderstood the problem? You don't want to hide the slider but change the slider items just to show as a list?
You're not trying to hide the slider with that css, it does what it says: sets opacity to 1 on a scale from 0 to 1 sot it's fully visible.
Set the slider instead to display: none
.single-portfolio .bxslider {
display: none;
}
Thou, I believe there's some setting where you could disable the usage of bxslider in portfolio page. But I don't know the theme so this will have to do.

Display list item over a div

I have a menu bar, whose menu li stretch down on mouse hover. It pushes sidewards a div below this menu bar div. But I want those stretch down lis to display over the mentioned div, without pushing it sidewards.
You can have a look at what I am trying to tell here.
Anybody got a solution?
http://jsfiddle.net/bpu2r/
I've simply added float: left; to the menu and clear: both; to the container.

Categories