My navbar is currently closed as default (navbar only shows on mobile).
Is there some css that will default the nav bar to open?
I currently have no code as I'm trying to edit a template. I believe it's a bootstrap navbar.
Site: yodega.com (on mobile, or small screen)
Thanks!
It is not supported by default:
https://github.com/twbs/bootstrap/issues/3944
There is simple and fast but not clean solution:
You can simulate clicking on navbar element after page rendering:
document.querySelector('button.navbar-toggle').click()
Method click is described in link:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
There is also better solution but it require to change your source code.
When your page is rendered you can find something like this:
<div class="navbar-collapse navbar-top-collapse collapse" style="height: 0px;">
You can simply change it on this:
<div class="navbar-collapse navbar-top-collapse in" style="height: auto;">
Probably style="height: 0px;" is added by your library, and you should overwrite this behavior.
Related
I am new to Semantic-UI and am having trouble with getting any modules to work; other Semantic-UI elements seem to be working (e.g. button animations). But for some reason none of the modules seem to be functioning properly. Specifically I have been try to set up tabs on a page, the tabs are clickable, but all the content of ALL the tabs is being displayed below when it should be hidden (except for the clicked tab ofcourse). I'm running Semantic UI with node js v10.1.0 and jquery 3.1.1., editing and opening with Visual Studio Code. I have followed the set up of Semantic as per their website.
I have tried different modules (e.g. accordion, dropdown) but none of the others seem to function properly either. I'm just trying to run the code from the website to no avail. I have tried reinstalling semantic ui, which did not seem to fix it. (I do note that whenever I have installed semantic ui there always appear to be warnings about deprecated packages/files but everything still installs).
HTML:
<div class="ui top attached tabular menu">
<a class="item active" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
JS:
$('.menu .item').tab();
None of the tabs function as tabs. All content is displayed that should be hidden by tabs.
I have solved the issue. It appears the css files from the saved semantic-ui files were not being detected through my href statements; it was fixed by changing the href tags linking to the files to instead link to the cloudflare links.
I have developed a site using wordpress and bootstrap 3 framework. My issue is when its uses the mobile collapse menu it doesn't display after I click the icon.
Been trying to debug a while now but no luck yet.
Site is question is
http://www.reillyscott.com.au/
thanks in advance
<div class="collapse navbar-collapse navbar-responsive-collapse">
Find this div and remove "collapse" class. Its not needed and its causing the issue.
Edit: Actually that div is not need it at all. You can move its innerHtml out of it and delete it.
It's because your JS is not changing the state of the menu to display block, maintaining the display:none;
The menu is being hidden in the bootstrap.css, line 3045.
You should be toggling the menu when a certain resolution comes, making one display:none and the other display:block.
To implement Bootstrap menus in Wordpress, I recommend you to use WP Bootstrap Nav Walker.
Took me a while to figure out your problem. Instead of going into too much detail, I'll just tell you what to delete, and it will work!
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" style="height: auto;">
<!--
The WordPress Menu goes here
-->
<div class="collapse navbar-collapse navbar-responsive-collapse"> **<--- DELETE THIS DIV**
<ul id="main-menu" class="nav navbar-nav navbar-right"></ul>
You already have a navbar-collapse in your first div. You're using it twice and throwing off the JavaScript. Only delete the opening and closing div. Keep your wordpress menu php code there.
Message me if you have further questions.
Cheers,
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
I know questions about broken links get asked all the time, however my issue seems a bit different, and none of the solutions have worked.
Right now none of the links to other websites in my nav section worked when clicked. It registers that they are there, and if you right click it and select "open in new tab" it works, but otherwise, nada. A few relative links (if thats the term for the href="#xxx" link to content on the page) to modal popups work fine though.
My HTML Code is listed below, as well as a Pastebin link to the CSS (so that I don't clutter up the box).
Removing the class="navigation" from the list tag seems to fix the link issue. Leaving the class on the tag but removing all the relevant CSS from the stylesheet, however, does not eliminate the issue and just removes the styling. I can't figure out why this would be the case.
I've tried setting the z-indices of my background, menu and nav to 1,2,3 (and 3,2,1 just for the hell of it) respectively so that they don't interfere, as recommended in other questions here, but to no avail. Anyone have any ideas?
CSS: http://pastebin.com/1KVTdBvF
Site: http://www.magratheamedia.com/npo
<div class="menu">
<div class="container clearfix">
<div id="logo" class="fleft">
<img src="images/logo.png" />
</div>
<div id="nav" class="fright">
<ul class="navigation">
<li data-slide="1">Home</li>
<li>Forum</li>
<li>Wiki</li>
<li>Government</li>
<li>Charter</li>
<li>In-Game</li>
<li>Applicants</li>
<li>IRC</li>
<div class="clear"></div>
</ul>
</div>
</div>
Your problem isn't CSS, it's your jQuery. This, in particular:
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
When you find your links, like this:
var links = $('.navigation').find('li');
You have to somehow exclude the ones that go to external sites. Maybe by giving the modal links their own class name or something.