i am getting problem to modify the menu present in the wordpress. i am trying to make it responsive but i am unable to do it so please help me out.
Just visit this link to see the images and css flow of my page.
https://drive.google.com/open?id=0B--TMsJz_cYVYnRnRFpBOVdXYzA&authuser=0
just look into picture and look to div style which is used so please explain me how to make dropdown menu using css only to display the link......
If you want a menu special for responsive design you could use a jquery plugin like mean menu from meanThemes.
https://github.com/meanthemes/meanMenu
Just add the css file to your theme (in header)
<link rel="stylesheet" href="meanmenu.css" media="all" />
add the jquery in the footer
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.meanmenu.js"></script>
and initialize the menu to the container with (also in the footer)
jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
in your document.ready
Related
I am using CSS flexbox to make the header of my page with display:flex;
Somehow, when I am linking Bootstrap 4 CDN link to my HTML, the flexbox doesn't behave like flexbox and different divs within flexbox come down to different lines.
Please help me out. Thank you.
Your custom CSS class is now conflict with Bootstrap-4 CSS class. If you want to avoid this conflict you have to do following:
First add the Bootstrap-4 CDN then your custom CSS. It will overwritten bootstrap CSS by custom CSS.
Example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="your-custom.css" />
<!-- Your custom CSS -->
If above solution isn't fix your issue go to your html change bootstrap class to custom class.
Example:
<nav class="navbar"></nav>
<!-- -->
Above class are reserved by bootstrap. If above class are conflict with your .navbar class please change that class.
<nav class="my-navbar"></nav>
<!-- OR -->
<nav class="navbar my-navbar"></nav>
If above solution not working then use !important after CSS property. It will overwritten bootstrap CSS by custom CSS.
Example:
.navbar{
display: flex !important;
}
Note: Try to avoid !important CSS property. Use new class to overwrite bootstrap CSS.
It's likely your css is overruled by the css of bootstrap. Since you are using CDN you can't change the bootstrap css.
I suggest you add '!important' to your header styles just to see if this will override BS css.
You can check to see which styles are used bij looking at your page in Chrome, press F12.
Select the 'Elements' tab. Select your header on the left side, and check the Styles on the right. It will show you which styles are used.
I am trying to create another page from the index page of Agency Bootstrap theme ,
in which the page will contain only Menu bar and its footer , but when i try to remove the
<header class="masthead">
Tag which i don't want but once i do that menu will not have background black color
Required Result :
Erroneous page while creating new page
Source : https://github.com/BlackrockDigital/startbootstrap-agency
Thanks !
The simplest way to solve the color issue is to add bootstrap class bg-dark to the nav tag. another solution is to add class .color
.color{ background-color: #212529}
if You want to remove the navbar Shrink effect just delete this line of code
<script src="js/agency.min.js"></script>
EDIT: I found out the solution. See my post at the bottom of the page.
I've created a template for joomla with materializecss. Everything works fine except the slider (which displays as a gray rectangle) and carousel which just shows images one after another as obsolete divs.
The carousel:
The slider:
I've imported the jquery script before materializecss. I've also called the carousel.carousel(). The code for slider and carousel I used is same as on the Materializecss website in examples. Can anyone help?
Updating materializecss files solved the problem. I also found out that a part of materialize.css was missing.
enter this script
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
)}
If you are using NOT default classes for carousel items - you need to change them classes in carousel.js file
I am using this link to have a side bar that I can hide or display. How can I add a bar to the right side of the div, that I can click to trigger the hide/show?
So far I found I can do a border-right: 5px solid black in css to make a basic one.. But I actually have no clue how to make it clickable.. I'm sure there might be a name for what I want to add, but I have no clue what it is.
Any help would be appreciated.
EDIT:
Got it working with that jsfiddle. But then I messed with it to try and move it to the main content div so on hover it can expand out to the right, and also not hide after hiding side panel(which could be fixed with the css for the panel toggle) Here is my modified jsfiddle, but I can't seem to click it for some reason.
edited the fiddle to something closer to what I think you needed:
http://jsfiddle.net/y7L2qvy6/18/
**My apologies.
You're trying to add something like this then, right?
http://jsfiddle.net/y7L2qvy6/3/
**
The opening and closing of the navigation div is achieved with:
<!--put whatever text or image you like here-->
and requires that you are including jquery, bootstrap, and the following script:
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Keep in mind that you must instruct the browser to load jquery before trying to run the script, like in the example above.
Finally, also make sure that all page content is inside of a div with an id of "page-content-wrapper", and that div must be inside of a div named "wrapper".
like so:
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- Navigation Content Here -->
</div>
<div id="page-content-wrapper">
<!-- Page Content Here -->
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
Ive seen sites where things like a login box will apprear, and the rest of the page will fade, buit the box stays the same.
How is this done?
Can someone please give me an example?
Thanks!
Check link text
And add following code on head section for faded background
<script language="Javascript">
$(document).ready(function() {
$.facebox.settings.opacity = 0.2
});
</script>
You can use any of the jquery lightbox /modal scripts to achieve the effect. There's lot of scripts that do what you are trying to achieve. My personal recommendations would be SimpleModal (if you need something just for a login window) or ColorBox (if you need multiple overlays and require a lot of customization)