Mixing
Sidebar not appearing
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
Hi my sidebar is not appearing when I click on the toggle button. I see it moving to the side but the sidebar is blank/transparent.
I think it has something to do with my js file.
Could someone help me out I am fairly new to coding and this community.
Thanks in advance !!
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:UsersquincDocumentsDeveloperProject 2.0jsmembers.js"></script>
</body>
</html>has something to do with my js script. I can't figure out the problem.
Could someone help me out, I am new to coding and it's my first project I am working on.
I have placed my HTML, CSS and JS code down below.
Thank you
javascript html css navbar sidebar
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
add a comment |
1
Hi my sidebar is not appearing when I click on the toggle button. I see it moving to the side but the sidebar is blank/transparent.
I think it has something to do with my js file.
Could someone help me out I am fairly new to coding and this community.
Thanks in advance !!
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:UsersquincDocumentsDeveloperProject 2.0jsmembers.js"></script>
</body>
</html>has something to do with my js script. I can't figure out the problem.
Could someone help me out, I am new to coding and it's my first project I am working on.
I have placed my HTML, CSS and JS code down below.
Thank you
javascript html css navbar sidebar
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
"The sidebar is blank/transparent" - The sidebar contains aul, did you mean to add more HTML?
– sol
Jan 3 at 2:17
Provide your css which makes more sense
– Ramesh
Jan 3 at 5:13
add a comment |
1
1
1
Hi my sidebar is not appearing when I click on the toggle button. I see it moving to the side but the sidebar is blank/transparent.
I think it has something to do with my js file.
Could someone help me out I am fairly new to coding and this community.
Thanks in advance !!
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:UsersquincDocumentsDeveloperProject 2.0jsmembers.js"></script>
</body>
</html>has something to do with my js script. I can't figure out the problem.
Could someone help me out, I am new to coding and it's my first project I am working on.
I have placed my HTML, CSS and JS code down below.
Thank you
javascript html css navbar sidebar
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
Hi my sidebar is not appearing when I click on the toggle button. I see it moving to the side but the sidebar is blank/transparent.
I think it has something to do with my js file.
Could someone help me out I am fairly new to coding and this community.
Thanks in advance !!
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:UsersquincDocumentsDeveloperProject 2.0jsmembers.js"></script>
</body>
</html>has something to do with my js script. I can't figure out the problem.
Could someone help me out, I am new to coding and it's my first project I am working on.
I have placed my HTML, CSS and JS code down below.
Thank you
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:UsersquincDocumentsDeveloperProject 2.0jsmembers.js"></script>
</body>
</html>/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:UsersquincDocumentsDeveloperProject 2.0jsmembers.js"></script>
</body>
</html>javascript html css navbar sidebar
javascript html css navbar sidebar
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
asked Jan 3 at 2:01
Quincy OffringaQuincy Offringa
213
213
"The sidebar is blank/transparent" - The sidebar contains aul, did you mean to add more HTML?
– sol
Jan 3 at 2:17
Provide your css which makes more sense
– Ramesh
Jan 3 at 5:13
add a comment |
"The sidebar is blank/transparent" - The sidebar contains aul, did you mean to add more HTML?
– sol
Jan 3 at 2:17
Provide your css which makes more sense
– Ramesh
Jan 3 at 5:13
"The sidebar is blank/transparent" - The sidebar contains a
ul, did you mean to add more HTML?– sol
Jan 3 at 2:17
"The sidebar is blank/transparent" - The sidebar contains a
ul, did you mean to add more HTML?– sol
Jan 3 at 2:17
Provide your css which makes more sense
– Ramesh
Jan 3 at 5:13
Provide your css which makes more sense
– Ramesh
Jan 3 at 5:13
add a comment |
2 Answers
2
active
oldest
votes
0
You are accessing the main section mysidebar. Your mysidebar section is set to width: 0 when you click closeNav function.
Instead that you need to access sidebar div and also just setting width:0 won't work because sidebar div contains ul element which takes some width and text inside ul li a also takes some width. So you can use css display property
Change your openNav and closeNav function.
function openNav() {
var sidebar = document.getElementById("sidebar");
sidebar.style.width = "250px";
sidebar.style.display = "block";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}
change your html. Add id to sidebar
<div id="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
answered Jan 3 at 4:01
JS EngineJS Engine
852315
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
It was my pleasure.
– JS Engine
Jan 6 at 18:51
add a comment |
0
Try this:
function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>answered Jan 3 at 5:06
Partho63Partho63
2,01211123
1
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015448%2fsidebar-not-appearing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You are accessing the main section mysidebar. Your mysidebar section is set to width: 0 when you click closeNav function.
Instead that you need to access sidebar div and also just setting width:0 won't work because sidebar div contains ul element which takes some width and text inside ul li a also takes some width. So you can use css display property
Change your openNav and closeNav function.
function openNav() {
var sidebar = document.getElementById("sidebar");
sidebar.style.width = "250px";
sidebar.style.display = "block";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}
change your html. Add id to sidebar
<div id="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
answered Jan 3 at 4:01
JS EngineJS Engine
852315
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
It was my pleasure.
– JS Engine
Jan 6 at 18:51
add a comment |
0
You are accessing the main section mysidebar. Your mysidebar section is set to width: 0 when you click closeNav function.
Instead that you need to access sidebar div and also just setting width:0 won't work because sidebar div contains ul element which takes some width and text inside ul li a also takes some width. So you can use css display property
Change your openNav and closeNav function.
function openNav() {
var sidebar = document.getElementById("sidebar");
sidebar.style.width = "250px";
sidebar.style.display = "block";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}
change your html. Add id to sidebar
<div id="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
answered Jan 3 at 4:01
JS EngineJS Engine
852315
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
It was my pleasure.
– JS Engine
Jan 6 at 18:51
add a comment |
0
0
0
You are accessing the main section mysidebar. Your mysidebar section is set to width: 0 when you click closeNav function.
Instead that you need to access sidebar div and also just setting width:0 won't work because sidebar div contains ul element which takes some width and text inside ul li a also takes some width. So you can use css display property
Change your openNav and closeNav function.
function openNav() {
var sidebar = document.getElementById("sidebar");
sidebar.style.width = "250px";
sidebar.style.display = "block";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}
change your html. Add id to sidebar
<div id="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
answered Jan 3 at 4:01
JS EngineJS Engine
852315
You are accessing the main section mysidebar. Your mysidebar section is set to width: 0 when you click closeNav function.
Instead that you need to access sidebar div and also just setting width:0 won't work because sidebar div contains ul element which takes some width and text inside ul li a also takes some width. So you can use css display property
Change your openNav and closeNav function.
function openNav() {
var sidebar = document.getElementById("sidebar");
sidebar.style.width = "250px";
sidebar.style.display = "block";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}
change your html. Add id to sidebar
<div id="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
answered Jan 3 at 4:01
JS EngineJS Engine
852315
edited Jan 3 at 4:25
answered Jan 3 at 4:01
JS EngineJS Engine
852315
answered Jan 3 at 4:01
JS EngineJS Engine
852315
answered Jan 3 at 4:01
JS EngineJS Engine
852315
852315
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
It was my pleasure.
– JS Engine
Jan 6 at 18:51
add a comment |
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
It was my pleasure.
– JS Engine
Jan 6 at 18:51
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
Hey SR Thapa, thank you for your input I have figured it out with your HTML code by removing the section and placing mysidebar id into the div and add sidebar as a class. I kept my JS code. Thank you very much
– Quincy Offringa
Jan 6 at 18:43
It was my pleasure.
– JS Engine
Jan 6 at 18:51
It was my pleasure.
– JS Engine
Jan 6 at 18:51
add a comment |
0
Try this:
function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>answered Jan 3 at 5:06
Partho63Partho63
2,01211123
1
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
add a comment |
0
Try this:
function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>answered Jan 3 at 5:06
Partho63Partho63
2,01211123
1
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
add a comment |
0
0
0
Try this:
function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>answered Jan 3 at 5:06
Partho63Partho63
2,01211123
Try this:
function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>function openNav() {
document.getElementById("sidebar").style.display = "inline-block";
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
}<section id="mysidebar">
<div class="sidebar" id="sidebar" style="display: none;">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>answered Jan 3 at 5:06
Partho63Partho63
2,01211123
answered Jan 3 at 5:06
Partho63Partho63
2,01211123
answered Jan 3 at 5:06
Partho63Partho63
2,01211123
answered Jan 3 at 5:06
Partho63Partho63
2,01211123
2,01211123
1
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
add a comment |
1
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
1
1
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
Hi Partho63 thank you for your input but i have figured it out with a previous comment.
– Quincy Offringa
Jan 6 at 18:44
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015448%2fsidebar-not-appearing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"The sidebar is blank/transparent" - The sidebar contains a
ul, did you mean to add more HTML?– sol
Jan 3 at 2:17
Provide your css which makes more sense
– Ramesh
Jan 3 at 5:13