I was hoping someone might be able to assist me with a simple CSS positioning question.
I have a link I want to show next to my top navigation but I do not want it to move in different browser sizes.
I have create a div with a class called "language" as seen below.
<!-- nav -->
<nav id="nav-main" role="navigation">
<?php alanbrandt_nav(); ?>
</nav>
<div class="language">
Dansk
</div>
I have also created the following CSS class but when I use this all the article links in the menu can't be clicked. It's as if the link has been removed from the menu items.
.language {
position:relative;
left:340px;
top:-27px;
}
Ideally the link should appear aligned to the right hand edge of the image but horizontally aligned with the top navigation bar. The above achieves the correct layout but stops the navigation from working as none of the menu items are active.
http://alanbrandt.com
Can someone tell me how I go about this?
Thanks
You should put your language div into the nav, and use absolute positioning :
HTML
<!-- nav -->
<nav id="nav-main" role="navigation">
<?php alanbrandt_nav(); ?>
<div class="language">
Dansk
</div>
</nav>
CSS
#nav-main {
position: relative;
width: 760px;
margin: 0 auto;
}
#nav-main .language {
position: absolute;
right: 0;
top: 0;
}
you need a dot before the class name:
.language {
position:relative;
left:200px;
top:40px;
}
Related
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>
HTML/CSS newbie here. I am making a web page with a text header in the top center of the page and a login button on the upper right. I'm writing in Bootstrap using React (which uses embedded HTML). Here is the code.
Header:
<div className="page-header">
<h1 id="header">Header text</h1>
</div>
Login button:
<div id="login">
/*Displays login button if user is logged in, 'Welcome, user' if not*/
{this.state.loggedIn?
<div className="welcomeText">
<p>Welcome, {this.state.user}</p>
</div> :
<div>
<button id="loginButton" onClick={this.onClick}>Login</button>
</div>
}
</div>
CSS:
#header {
text-align:center;
}
#login {
float:right;
}
.welcomeText {
float:right;
}
The issue is that the login button is pushing the header text to the left and I have no way to move it back. I can temporarily solve this using padding; however, when the login button is replaced by a username, it gets pushed over even further the longer the username is. I'd like to know how I can fix this so that the username will be right-aligned and the header will stay in place. Thanks in advance!
As you write in it seems it may be react or something like javascript jsx format.
for header fix you should have to write code like below. this below given code is just to fix header at top position as per your need.
.page-header{
position:fixed;
top:0;
width:100%;
}
I'd use absolute positioning. I've simplified the example but you should get a good idea.
HTML
<div id="page-header">
<h1 id="header">Header text</h1>
<div id="login">
<div className="welcomeText">
<p>Welcome, Test User</p>
</div>
<div>
<button id="loginButton">Login</button>
</div>
</div>
</div>
CSS
#page-header {
background-color: #f0f0f0;
padding: 1em;
position: relative;
text-align: center;
}
#login {
position: absolute;
right: 1em;
top: 1em;
}
Set position: relative on #page-header so that the child element is positioned relative to it rather than the page. Then set position: absolute on the #login element. If you set its right position it will always sit to the right of the centralised #header text.
As long as you apply to absolute position to the #login element the size of the children won't matter. You'll probably need to tweak this on smaller devices, though, as there will be text overlapping.
https://codepen.io/raptorkraine/pen/QBdbPy
I have been working on a self-project to duplicate the reddit page for javascript using the JSON data available. But am not able to replicate the behaviour of the original website in its header section, where the header is responsive (behaviour when screen size is decreased).
GIF : how the original website header section works.
The problem :
Overlap the right side (Login page options) over the left hand side. The overlapping is such that the behind text is not shown. I have managed to do the overlapping, but since the background for the divs are translucent, the behind text too shows. Can't think of any solution for this.
GIF : my header (behind text seen)
The navbar elements transcend down when space is not enough. This is not how it is in the original, where they get hidden by the more and Login section. I cannot figure out how to go about having it in a single row.
GIF : my header (header elements move down)
A smaller, similar sample snippet :
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7); /* translucent */
position:absolute;
top:0;
width: 100%;
}
#top-right-div{
position: absolute;
right: 0;
z-index: 1000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="navbar navbar-static-top custom-header-full">
<!-- TOPMOST header with Links and Login/Signup -->
<div class="navbar-header custom-top-header-container">
<!-- Left side with various links -->
<div id="top-left-div">
<a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
<a class="navbar-brand" href="#">POPULAR</a>
<a class="navbar-brand" href="#">ALL</a>
<a class="navbar-brand" href="#">RANDOM</a>
</div>
<!-- Login/Signup on the right -->
<div id="top-right-div">
<span class="navbar-brand">Want to join?
Log in or sign up
in seconds |
<button class="glyphicon glyphicon-wrench tools-icon"></button>
</span>
</div>
</div>
</div>
In case you want to check with the full project, the link on Github.
An interesting point to Note : in the header, the left sided titles are being overlapped by the right sided section. So it is a smooth transaction where the possibility is such that even partial of the text is seen in a title when overlapped. Basically its not a matter of making the title element invisible by width as that would make the whole title invisible.
Ex :
The title has TODAYIL
The title has TODAYILEARNED (whole of the title)
If you're able to use CSS flexbox, I think this solution works the way you want:
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7); /* translucent */
position:absolute;
top:0;
width: 100%;
display: flex;
}
#top-left-div {
flex: 1 1 0%;
overflow: hidden;
display: flex;
white-space: nowrap;
}
#top-right-div{
flex: 0 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="navbar navbar-static-top custom-header-full">
<!-- TOPMOST header with Links and Login/Signup -->
<div class="navbar-header custom-top-header-container">
<!-- Left side with various links -->
<div id="top-left-div">
<a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
<a class="navbar-brand" href="#">POPULAR</a>
<a class="navbar-brand" href="#">ALL</a>
<a class="navbar-brand" href="#">RANDOM</a>
</div>
<!-- Login/Signup on the right -->
<div id="top-right-div">
<span class="navbar-brand">Want to join?
Log in or sign up
in seconds |
<button class="glyphicon glyphicon-wrench tools-icon"></button>
</span>
</div>
</div>
</div>
What I did:
Make .custom-top-header-container display:flex to ensure the left and right display side-by-side.
Make #top-right-div only ever take up the space that its content needs (i.e. don't grow or shrink)
Make #top-left-div fill whatever space remains in the container, and use overflow:hidden to hide any content that might overlap with #top-right-div on small widths.
Set #top-left-div to white-space: nowrap to prevent links with spaces (like "My Subreddits") from breaking onto multiple lines when the screen shrinks small enough.
I've managed to implement a pure-CSS solution without flex of what I assume you wanted to get.
I will highlight some of the changes I've made (the ones that don't directly pertain to the problem and could therefore be overlooked):
Got rid of .navbar, .navbar-static-top, .navbar-header, .custom-header-full and .custom-top-header-container. Please find a way to overwrite their behaviour at your own time if you really need those classes. I can try to help if it proves too difficult.
Removed CAPS LOCK from source and substituted it with text-transform: uppercase; inside the CSS file. This can really help in the future if one happens to fall asleep while adding a new navigation link.
Substituted "▼" with an HTML entity (▼). Modern browsers normally don't care, but it's still good practice.
Here is a Fiddle of the end result. Let me know if you have any questions.
A little hack can help you I guess. Try doing these CSS changes :
#top-right-div {
position: absolute;
right: 0px;
z-index: 1000;
background: rgba(255,255,0,1);
}
And add background: rgba(0, 0, 0, 0.7); to the .navbar-brand under top-right-div in html.
This would create an illusion of what you are trying to achieve.
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7); /* translucent */
position:absolute;
top:0;
width: 100%;
display: flex;
}
#top-left-div {
flex: 1 1 0%;
overflow: hidden;
display: flex;
white-space: nowrap;
}
#top-right-div{
flex: 0 0 auto;
background: rgba(255,255,0,1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="navbar navbar-static-top custom-header-full">
<!-- TOPMOST header with Links and Login/Signup -->
<div class="navbar-header custom-top-header-container">
<!-- Left side with various links -->
<div id="top-left-div">
<a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
<a class="navbar-brand" href="#">POPULAR</a>
<a class="navbar-brand" href="#">ALL</a>
<a class="navbar-brand" href="#">RANDOM</a>
</div>
<!-- Login/Signup on the right -->
<div id="top-right-div">
<span class="navbar-brand" style="background: rgba(0, 0, 0, 0.7);">Want to join?
Log in or sign up
in seconds |
<button class="glyphicon glyphicon-wrench tools-icon"></button>
</span>
</div>
</div>
</div>
for Overlap you can use this style:
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7);
position:absolute;
top:0;
width: 100%;
}
#top-right-div {
width: 45%;
float: left;
}
#top-left-div {
display: inline-block;
width: 53%;
float: left;
}
Like :demo
and other device you can use media queries Like :
#media (min-width:0px) and (max-width:799px) { add style }
write style according to device.
i thing it's helpful for you.
To handle the stretching issues. Try to inspect the website using responsive option
responsive button
Then you can know the dimension of the screen when the texts are overlapping or the navigation bar is two line high
get the width
So at last you can add your media query to create differences from the desktop website. In case it's 450px
#media only screen and (max-width: 450px) {
/* Add your css specification here. */
}
I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
Please check this image
I want when clicking on the + sign inside the red circle, to make a div shows. this div have many check box.
I made the div already. but I didn't know what is its style to be above the text and above the white space in the image
I am sorry if i couldn't understand my mean.
<h3>html</h3>
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
the div is id = div1 ,which I didn't show its content because that doesn't matter for the answer, but I dont know where to put it.
I would like to have the div like this
kindly help
If you need to make "glued" child, you have to define relative position to the parent, absolute position and z-index to child(ren).
#div1 {
position: absolute;
top: 32px;
right: 0;
}
jsfiddle
You'll need to use two main CSS properties. position: absolute to place it up there and z-index to place it 'above' other items visually. In order for position: absolute to work, you'll also need to set a parent to position: relative.
The dropdown is there by default but hidden. When the + is clicked, a class is toggled on the menu to show/hide it.
The main bits:
HTML:
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<a id="DropdownSeviceLink" href="#">+</a>
<div class="menu">
lkj sldkj sldkj slkdj slkdj
</div>
</div>
CSS:
.menu {
display: none;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.menu.shown{
display: block;
}
.chartHeaderClass {
position: relative;
}
JS:
$('#DropdownSeviceLink').on('click', function(){
$(this).parents('.chartHeaderClass').find('.menu').toggleClass('shown');
return false;
});
Here's an ugly codepen to get you on the way. http://codepen.io/anon/pen/poqjK