I have a navbar I am creating that has a bunch of menus and submenus. The menus are trailing off the point of viewing and allowing my page to scroll which is not my desired result. I would like for it to flip from right menu to left if there is not enough room for it.
For my Fiddle I have a quick demo that fairly accurately represents my real navbar. To replicate my issue position the webpage depending on your resolution so that the navbar is forced off the side of the page. Click on the interactive tab and on the right column (ignore the styling) click stuff system and go into those submenus. They will trail off the page unviewable unless you scroll which is not what I want.
I have tried using right:0;left:auto; as well as positions for the css as I have found in other discussions but that did not help. I also have tried to use a JQuery menu that worked for the most part but didn't do everything I needed so that is not an option currently. How can I get it to be responsive and realize that it cannot overflow off the page?
UPDATE: I have created a bounty as I need an answer for this. I have modified the question slightly.
To do this you have to use JavaScript to make the menu dynamically change its style based on the viewport.
Luckely for all of us, there are some great guys on the web who create these things for existing frameworks. So others don't have to invent an existing wheel. Take a look at the link below. This is exaclty what you are looking for (atleast, as far as I can see in your question).
http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
It is fully compatible with bootstrap 3.
For a temporary fix (Not dynamic)
Use the following CSS rules
ul.dropdown-menu.dropdown-inverse {
position: absolute;
left:-58%
/* Overriding value from 100% defined in ".dropdown-submenu > .dropdown-menu" */
margin-right: 200px;
margin-left: -60px;
}
For a responsive solution, basically calculate the width of each menu and add them up.
Then subtract the value from the screenwidth and then add the above class to the subject.
Fiddle Link
Use this css rule in the media queries (at widths that have the problem). It should sort it out to what i believe you want
.dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
top: 0;
left: -92%;
margin-top: -6px;
margin-right: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
Fiddle
Try This:
.dropdown-submenu > .dropdown-toggle:hover + .dropdown-menu{
display: block ;
}
Related
This is my first post here. I'm trying to customize a button of "Add to wishlist"/ "It's already in wishlist" text in it to a website for a client, and that button is found in 2 separate pages. It's a website I made in Wordpress and Elementor mostly, but I have to customize that button myself because I can't do it from Wp/Elementor.
I've used this code to customize that button:
.tinvwl-loop-button-wrapper{
background-color: #222529 !important;
padding: 4px 5px 4px 4px !important;
margin: 10px 25px 0px 25px !important;
font-size: 14px !important;
border-radius: 3px !important;
font-weight: 600;
}
The problem is that in the Product page the button looks well in Related Products (Produse Similare in Romanian language) section of the page, but in the Shop page (called Magazin in Romanian) the button has too much space left and right of the text.
I noticed that the buttons share the same classes in both pages, so if I add something like max-width: 160px; then the button goes far to the left in Shop page, and adding margin-left to it won't work because then it ruins the button on the other page. What can I do to remove all that space left and right inside of the button and have the button similar to the "Read more" (Citeste mai mult) or "Add to cart" (Adauga in cos) buttons?
PS. I know I used too much the !important rule. It's my first ever website where I'm using CSS and removing the rule from all the code could potentially ruin it all I think and I'd have to start from scratch.
Product page
Shop page
You can add a separate class for one of the buttons where you set the margins you need.
Simple replace with it, it will working fine
.tinvwl-loop-button-wrapper {
margin: 10px 41px 0px 41px !important;
}
The problem is the background color is set to the button wrapper in loop page.
.tinvwl-loop-button-wrapper {
background-color: #222529 !important;
}
you need to remove the above css line and add it to the button itself.
.tinvwl_add_to_wishlist_button {
background-color: #222529 !important;
}
you will need to add some padding then to the button. There are many !important statements overriding each others. you will need to adjust that, It will be much harder to fix later by adding more.
Hi George I checked the links you have provided.
You need to use a parent class that exist in Shop page but not in related products which in your case is .wcpa_has_options and you need to combine this with the button class that you are trying to resize > .tinvwl-loop-button-wrapper
at the end you will get this class combination which will only change the button size on shop pages.
.wcpa_has_options .tinvwl-loop-button-wrapper {
width: 152px;
align-self: center;
}
I have tested it and it works just the way you want!
Glad to be help. Let me know if you have questions.
I've created three circles that are used for the dot controls/pagination on an image slider. For some reason on page load in Chrome they always appear first as squares and not as circles. Once you interact with them they then turn to circles. How can I get them to be outlined circles on page load? (if i just fill in the circles with a background they work and are circles on page load but I want them to be outlined circles on page load)
Any ideas? Thanks!
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
margin: 0 8px;
height: 8px;
width: 8px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px solid #b6b6b6;
}
Thanks for the help guys! I figured out what the issue was but I don't quite understand why. I added an overflow to the dots and this took care of the bordered showing up as a square rather than a circle like I wanted on page load.
overflow: hidden;
I don't know exactly what do u mean.
But I think issue is html of slider creates dynamically via js on dom or page load event, so css applied with some delay.
Check source code of your page with right click->view source to ensure.
Try to call your slider plugin immediately after slider container, not at the end of page for ex.
This question is based on this JSFiddle. It is a navigation design with two top level menu items and three submenus (structured for accessibility without script). An element to look at may be:
<nav class="top-menu">
There is one pressing issue:
Just open the JSFiddle in Internet Explorer and see. Why does it drop down like that only in IE? Even in IE9 and 10.
Any help here will be greatly appreciated!
I have noticed that "top-header" blocks had different heights, and to fix this I've added line-height CSS rule:
.top-header {
padding: 0 0 5px 0;
display: inline-block;
margin-left: 20px;
position: relative;
+ line-height: 28px;
}
And it currently seems same for me in IE and Chrome.
Updated fiddle
add
height :136px \0/;
at the end of .top-header
and the problem will be solved check
jsfiddle
You may use some 'tape' to fix this in IE. :)
Via CC, add a border-bottom: white 10px solid; or outline:white 10px solid;
http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/
It doesn't explain much what layout is playing about.
(CC included : http://jsfiddle.net/SKJvv/10/ )
So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.
hopefully this will be an easy answer for some of you CSS veterans out there.
I'm developing a site for a client. For readability, I'll just give you a link to the website and the css page in question.
HTML
CSS
I'm trying to make a sub menu pop up to the right of the main menu when you scroll over "Star Quartz Grout." My current CSS obviously isn't correct though, and I could use some guidance.
ul#subNav {display: none; width: 134px; }
li:hover ul#subNav, li.over ul#subNav {display: inline-block; position: absolute; top: 0px; left: 134px; }
My guess is that it's working but it's hidden behind the rest of the page. I could be wrong though. It's kind of hard to confirm, even with Chrome's "Inspect Element" (very nice thing btw). It's probably some dumb mistake. Anyway, thanks in advance. I'm a bit of a CSS novice.
You can try this :
ul#subNav ul
{
display: none;
}
ul#subNav li:hover ul
{
display:block;
}
But be careful because your "li" zone is smaller than the link itself.
I did it this way on this website : Spirit Of Polo (hover the shopping cart).
Be careful, this kind of effect (hover) will not be visible on touch-screen devices (because hover is impossible if you think about it)