How to change my header menu into full width? - html

I've got a problem with my header menu. The menu div is inside a container (width 1240px) and the div is 100%. I would like to have a full green colored menu (like above from Stack Exchange).
Can I change it with CSS? Could anybody help me please?

You'll need to take the menu div out of the container and place it above.

If you are using bootstrap, you could use container-fluid, if not follow the answer of Jordan and move the menu out of the container

Assuming this is your situation
<div class="container" width="1240px">
<div class="menu" width="100%">..</div>
</div>
You can either do the following
<div class="menu" width="100%">..</div>
<div class="container" width="1240px">
</div>
or
<div class="container-fluid">
<div class="menu" width="100%">..</div>
</div>

Related

Skeleton: A simple, floating, responsive navigation bar

I am trying to create a simple, floating and responsive navigation bar while using Skeleton boilerplate.
It should be nothing more than a logo align to the left of container and a few menu anchor links aligned to the right. Position of it should be fixed while scrolling the site's content, while staying in Skeleton's responsive grid. Exactly like here.
Natural way of doing this would be something like this for me.
<header>
<div class="container">
<div class="row" style="position: absolute; margin-top: 5rem">
<div class="two columns">
<!--LOGO-->
</div>
<div class="ten columns" style="text-align: right;">
<!--MENU-->
</div>
</div>
</div>
</header>
The problem is that by setting position: absolute, div loses its ability to divide into columns. Also, the links aren't clickable. Can anyone suggest a working solution? Having a hamburger menu icon on mobile would be an ideal extension, so if anyone knows the simplest way to do this, I would love to hear it out.
Thanks in advance!

How to horizontally scroll a inner div with browser scrollbar?

I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...

Bootstrap Image Link not working

I have a logo image in my header and I have the standard code in there, the browser source code even shows it, but the link isn't going anywhere. Please see below:
<img class="img-responsive hidden-xs" src="img/sitewide-images/logo.png" width="106" height="106" alt=""/>
Here is a link to it live on a testing server: http://wsieworksstaging.com/ptmw/index.html
Bootstrap should be container > row > column
You didn't place those columns within a row, so the row below isn't clearing and is overlaying it. Try this:
<div class="container">
<div class="row"> <!-- wrap with a row to force the content below to clear -->
<div class="col-md-2 col-sm-2">..</div>
<div class="col-md-10 col-sm-10">..</div>
</div>
<div class="row">
<nav class="navbar navbar-default navbar-inner" role="navigation"> .. </nav>
</div>
</div>
From The Documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Because your div with the class row is sitting on top of it and blocking any clicks. Add clear:left to have it get out of the way, and the link will become clickable.
You can also try giving that anchor an absolute position and a z-index value.
a[href="index.html"] {
position: absolute;
z-index: 1;
}

Something moves sidebar menu after putting table on a website

This menu on the left should be exactly next to that table at right, it's okay on other pages. No idea how to fix it.
(source: gyazo.com)
We need code, the image isn't sufficient
<div class="tooted" style="float:left;">
</div>
<div class="menu" style="float:right;">
</div>
<div style="clear:both;">
</div>
CSS
.tooted{width:50%;}
.menu{width:50%;}

Problem with overlay of 2 elements

I have the following code:
<div style="height:500px">
<ul style="height: 1000px">
....
</ul>
</div>
I am using the UL as Jquery carousel.
My problem is that the div won't act as a 500px window above that UL carousel,
and it seems like its streching the DIV so it will also fit the 1000px.
How can this be solved?
thanks
try <div style="height:500px; overflow: hidden">
Its hard to tell whats happening aside those two code lines but you would also need to set in the css that the div should have overflow hidden so that no content will flow over the height