so I'm using this guide to create a portfolio slider (https://github.com/lmgonzalves/momentum-slider)
But I dont like the size of the buttons which I want to make higher. It just seems like anything I do in the CSS file doesnt change anything. The buttons work and the CSS itself works, I just cant change the size of the button...
This is the link of the portfolio-carousel.css (https://github.com/lmgonzalves/momentum-slider/blob/master/css/portfolio-carousel.css)
<link rel="stylesheet" href="css1/normalize.css">
<link rel="stylesheet" href="css1/portfolio-carousel.css">
then the buttons in HTML
<main class="sliders-container">
<ul data-animate="fadeInUp" class="pagination">
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
</ul>
</main>
Then i call the scripts
<script src="../js1/momentum-slider.js"></script>
<script src="../js1/portfolio-carousel.js"></script>
You can add increment padding property in your css. It will increate the size of the button
padding:10px;
if already have some padding add more px in padding if 10 then 15px so on...
Related
How can I get my sticky navigation menu to change background color (i.e. blue to white) after sticking to the top of the screen specifically using the GetUIKit framework?
Here's my code:
<nav class="uk-navbar-container" uk-navbar data-uk-sticky>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
<li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
<li class="uk-parent">resume</li>
</ul>
</div>
</nav>
I read something about being active and inactive, but I don't know what I'm supposed to do. I would prefer to only use the GetUIKit framework in this situation, but if there are easy solutions that are compatible with GetUIKit's code, I'd be willing to try! Thank you!!
As written in docs, you need to provide a class for active state with cls-active: uk-navbar-sticky
For valid HTML5 code, I'm using data-uk instead of uk (which works fine as well)
.tall-placeholder {
height: 1000px;
}
.uk-navbar-sticky {
background-color: powderblue!important;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
<nav class="uk-navbar-container" data-uk-navbar data-uk-sticky="cls-active: uk-navbar-sticky">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
<li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
<li class="uk-parent">resume</li>
</ul>
</div>
</nav>
<section class="tall-placeholder"></section>
You are using prefect, You just don't need to revise code, It's already adding a "uk-active " class when you scroll. So place background color on .uk-active class.
I think Bootstrap is very hard to understand and override using CSS overriding rule (I don't really want to create my own custom Bootstrap CSS because really it's not very flexible, just one small change will require us to rebuild a new version of Bootstrap from the LESS source code).
What I want here is just simple that when hovering on a link (in a navbar), change its background to my own color, not the ugly default color Bootstrap sets. So even when I define an Id for my link element, CSS rule still does not work at all.
li#li#li#li#li#li#li#li:hover {
background-color:red!important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" id="menu">
<ul class="nav navbar-nav">
<li id="li">Test</li>
</ul>
</div>
As you can see even with that CSS rule, it cannot be overridden? Or I'm wrong with the actual element whose background is changed on hovering (while I think it should be actually the li element)?
Also I'm wondering if someone could explain to me by how Bootstrap could make that magic happen. I would like to apply that same magic in my own CSS plugin, it may be helpful in some case.
it's the a link element that's getting that background
#li:hover a {
background-color:red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" id="menu">
<ul class="nav navbar-nav">
<li id="li">Test</li>
</ul>
</div>
Pure css pure-menu-heading not aligning with items in Firefox? To see run this on Firefox,http://purecss.io/layouts/marketing/. 'YOUR SITE' pure-menu-heading is above the pure-menu-item items but aligns well in Chromium and Opera. Also class 'header' is not in
<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/marketing.css">?
Just add float: left to .pure-menu-heading. Like:
.pure-menu-heading {
float: left;
}
Hope this helps!
you need to float:left the "your site" (.home-menu .pure-menu-heading) that fixes it
the reason this happens in firefox (according to this answer Firefox unexpected line break using floats & overflow hidden - and also checked) is that firefox set default white-space to nowrap.
so setting the wrapper div .pure-menu.pure-menu-fixed to white-space:normal also fixes this issue and might actually be a better solution for you
change your HTML like below
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
<a class="pure-menu-heading" href="">Your Site</a>
</div>
put anchor tag after ul
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
When you look at that pen: http://codepen.io/helloworld/pen/eNpBdb
where I use bootstrap 3 css cdn attached.
<div class="container">
<div class="row">
<ul style="background:orange;" class="nav navbar-nav">
<li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html" target="_self">disclaimer</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html#!/content=privacy" target="_self">Datenschutz</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/site-map.html" target="_self">Sitemap</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/contact.html" target="_self">Kontakt</a>
</li>
</ul>
</div>
When I resize my browser window to under 767px in width, why does the left margin/padding/space of the disclaimer hyperlink and all other 3 hyperlinks disappear?
Who removes that space? I need them as it looks very bad on small devices.
The row class has
margin-left: -15px;
margin-right: -15px
The child column items have their own padding them.
This is meant to line up with the
container that has
margin-left: 15px;
marign-right: 15px;
Solution: Remove the row class, or use the column-xs-12 class for your child element.
The classes you are using "container", "row", "nav", "navbar-nav" are all classes within bootstrap, because bootstrap is built to be responsive after browser resizing it will attempt to make it easier for smaller devices(phones, tablets, etc) to use this can be overcome by adding a custom css file under the bootstrap include and setting certain properties to !important.