I am setting up a jQuery mobile webpage. We set up a NavBar in the header.
The problem that occurs right now is that the navbar is padding (I guess) 1px to the right.
So on Mobile screens the navbar is lining out to the right and does not fit perfectly under the header bar..
The links o you could see what i Mean: http://lc.gorillaspots.nl/test/l/web/test/test.php
For example I put the Navbar as a stand alone in the Page (under the header navbar) and then you can see it had 1px on the right missing..
WI can't seem to find the problem in stylesheet.
If you have an another css file and if it is below jquery mobile css file add this to it:
.ui-navbar li .ui-btn {
margin: 0 -1px !important;
}
Original style is attached to a tag (div[data-role="navbar"] ul li a)
Related
Demo of slide menu in the top left of the page:
https://cuppalabs.github.io/cuppa-ng2-slidemenu/
Using the Google Tools I have been able to change the margin-top of the menu, but I've had no luck doing the same with my own copy.
My best attempt:
cuppa-slide-menu span div .menu-container .cuppa-menu .show-menu,
cuppa-slide-menu span div .menu-container .cuppa-menu .hide-menu {
margin-top: 134px !important;
}
I have also been unable to locate the css file located at src="/path/to/angularjs/angular.min.js"
Regarding the icon sizes, I was unable to do it even on Google Chrome.
Any advice would be much appreciated.
There is not a css file as such, the styles are included in the js files, I have been able to change the margin of the menu by writing the following in my stylesheet:
.cuppa-menu-overlay, .menu-container[_ngcontent-c3]{
margin-top: 150px !important;
}
And the result is
I hope I have helped, greetings
I have a bootstrap component nav-tabs and it works normally when the page width is larger than needed for the line (bootstrap .row div).
The problem is that when I change the view for mobile devices, responsive design is not behaving as it should and the tabs are misaligned.
See the code in the link below, the extent to which the page width is decreased, the Company, Support and Design tabs are behaving strangely.
http://www.bootply.com/Ym1iDjaBjz#
That's normal because there is not enough space for all tabs.
You could reduce padding at .nav-tabs li a to create space or add the folowing rule to make them display in 100% width.
.nav-tabs > li, .nav-tabs li a { display: inline-block; width: 100%; }
.nav-tabs li a { border: 1px solid #ddd; }
Good Luck!
I've used the bootstrap-tabcollapase library in similar situations: https://github.com/flatlogic/bootstrap-tabcollapse
It's a third-party bootstrap add-on that converts tabs into accordion panels at small media query widths.
I'm starting a new project with Bootstrap 3, and I need that clicking on "Sandwich" icon in responsive view, will open collapsed navbar from left side off-canvas instead from the top like in default behaviour.
I'm surprised when I see that in official documentation there is only this Example, that anyway is putting off-canvas a sidebar and not main navigation bar...
Can you help me?
In your custom css:
.navbar-toggle {
float: left;
margin-left: 15px;
}
This will basically override the bootstrap css that forces the toggle to float right. Make sure the put your custom css link tag AFTER the bootstrap css link tag.
I've been searching through stack overflow to find an answer to this, but nothing has been helping me (or I've been adding it incorrectly).
I've set up a horizontal menu on a website for a client and am trying to center the menu items within the menu bar, however, the right and left padding is off by 1px between firefox and chrome, which makes the last menu item in the row butt up against the right edge only in Firefox. Dropping the left and right padding in firebug by 1px on the li tags in the menu makes it look like it does in Chrome with my original CSS.
The problem code seems to be on the li tags padding.
Here is a JSFiddle with my menu code (sans background images, but the problem is still evident) http://jsfiddle.net/FxznT/1/
and here is the original site I've been working into for reference: http://clients.taylordesign.com/LCBP/site/home.html
What am I missing? I am already using a CSS reset. Thanks.
You could try and use a CSS hack to select only Firefox:
#-moz-document url-prefix() {
.ul.topNav li {
padding: 16px 11px;
}
}
I'm struggling with an anchor (specifically a:hover) tag in CSS. Here's my JSFiddle:
http://jsfiddle.net/yXwng/
Basically I have a nav bar with a custom image (in the fiddle I got rid of it because I'm just trying to understand the syntax and line things up). The nav bar is a div and I have five links on the nav bar which are all nested divs.
In order to make the each of the nested divs links (I made the entire div a link), I added a transparent png as the background image and set the link to the background image, thus the nav bar custom image still shows and you can click the link on the nav bar.
Now, I'm trying to make a hover/rollover image for each nav bar element. When I rollover, it shows the new image but it's aligned completely wrong (down and to the right of where the original image was). On my fiddle, I used the code, but instead of the images I'm using, I just used borders for alignment purposes. You can see on the example that the red box (which is the anchor) is not lined up for some reason with the div. That is exactly where the hover image shows up when I try to implement it.
Any ideas? Thanks!
if you add the same dimensions to your a link, it should work perfectly:
#homelink a{
border:1px solid red;
width: 200px;
height: 40px;
display:inline-block;
}
You need to give a display block and some line height to <a> like this:
#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}
It will be aligned with div. BTW you need to use UL LI structure for it.