How can I change a scrolling menubar to a stable one?
0
I am creating a website and I wanted to have scrolling menubar at first and then I realised that it does not appear on every browser, now I want to change it to a stable menubar. What would be the best way to convert a scrolling menu bar to a stable one?
.menubar
position: fixed;
top: 0px;
height: 80px;
width: 100%;
z-index: 9999;
background-color: #FFF;
margin-top: -80px;
-moz-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
-webkit-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
<div class="menubar" data-scroll="true">
<ul class="mainmenu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> Thank you!
html css scroll menubar
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
asked Nov 13 '18 at 2:08
MMC
12
add a comment |
0
I am creating a website and I wanted to have scrolling menubar at first and then I realised that it does not appear on every browser, now I want to change it to a stable menubar. What would be the best way to convert a scrolling menu bar to a stable one?
.menubar
position: fixed;
top: 0px;
height: 80px;
width: 100%;
z-index: 9999;
background-color: #FFF;
margin-top: -80px;
-moz-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
-webkit-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
<div class="menubar" data-scroll="true">
<ul class="mainmenu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> Thank you!
html css scroll menubar
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
asked Nov 13 '18 at 2:08
MMC
12
Please provide your css and html so we can help you!
– MartinBA
Nov 13 '18 at 2:13
We need your code to fix your problem
– Jack Bashford
Nov 13 '18 at 2:14
I just added some part of the code. Thank you so much!
– MMC
Nov 13 '18 at 2:40
add a comment |
0
0
0
I am creating a website and I wanted to have scrolling menubar at first and then I realised that it does not appear on every browser, now I want to change it to a stable menubar. What would be the best way to convert a scrolling menu bar to a stable one?
.menubar
position: fixed;
top: 0px;
height: 80px;
width: 100%;
z-index: 9999;
background-color: #FFF;
margin-top: -80px;
-moz-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
-webkit-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
<div class="menubar" data-scroll="true">
<ul class="mainmenu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> Thank you!
html css scroll menubar
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
asked Nov 13 '18 at 2:08
MMC
12
I am creating a website and I wanted to have scrolling menubar at first and then I realised that it does not appear on every browser, now I want to change it to a stable menubar. What would be the best way to convert a scrolling menu bar to a stable one?
.menubar
position: fixed;
top: 0px;
height: 80px;
width: 100%;
z-index: 9999;
background-color: #FFF;
margin-top: -80px;
-moz-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
-webkit-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
<div class="menubar" data-scroll="true">
<ul class="mainmenu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> Thank you!
.menubar
position: fixed;
top: 0px;
height: 80px;
width: 100%;
z-index: 9999;
background-color: #FFF;
margin-top: -80px;
-moz-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
-webkit-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
<div class="menubar" data-scroll="true">
<ul class="mainmenu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> .menubar
position: fixed;
top: 0px;
height: 80px;
width: 100%;
z-index: 9999;
background-color: #FFF;
margin-top: -80px;
-moz-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
-webkit-box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
box-shadow: 0 2px 2px rgba(200, 155, 155, 0.8);
<div class="menubar" data-scroll="true">
<ul class="mainmenu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> html css scroll menubar
html css scroll menubar
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
asked Nov 13 '18 at 2:08
MMC
12
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
asked Nov 13 '18 at 2:08
MMC
12
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
edited Nov 13 '18 at 3:07
Shiladitya
9,39391830
9,39391830
asked Nov 13 '18 at 2:08
MMC
12
asked Nov 13 '18 at 2:08
MMC
12
asked Nov 13 '18 at 2:08
MMC
12
12
Please provide your css and html so we can help you!
– MartinBA
Nov 13 '18 at 2:13
We need your code to fix your problem
– Jack Bashford
Nov 13 '18 at 2:14
I just added some part of the code. Thank you so much!
– MMC
Nov 13 '18 at 2:40
add a comment |
Please provide your css and html so we can help you!
– MartinBA
Nov 13 '18 at 2:13
We need your code to fix your problem
– Jack Bashford
Nov 13 '18 at 2:14
I just added some part of the code. Thank you so much!
– MMC
Nov 13 '18 at 2:40
Please provide your css and html so we can help you!
– MartinBA
Nov 13 '18 at 2:13
Please provide your css and html so we can help you!
– MartinBA
Nov 13 '18 at 2:13
We need your code to fix your problem
– Jack Bashford
Nov 13 '18 at 2:14
We need your code to fix your problem
– Jack Bashford
Nov 13 '18 at 2:14
I just added some part of the code. Thank you so much!
– MMC
Nov 13 '18 at 2:40
I just added some part of the code. Thank you so much!
– MMC
Nov 13 '18 at 2:40
add a comment |
1 Answer
1
active
oldest
votes
0
try change this
<div class="menubar" data-scroll="true">
to
<div class="menubar">
answered Nov 13 '18 at 3:40
Nadiya
35
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
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%2f53272751%2fhow-can-i-change-a-scrolling-menubar-to-a-stable-one%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
try change this
<div class="menubar" data-scroll="true">
to
<div class="menubar">
answered Nov 13 '18 at 3:40
Nadiya
35
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
add a comment |
0
try change this
<div class="menubar" data-scroll="true">
to
<div class="menubar">
answered Nov 13 '18 at 3:40
Nadiya
35
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
add a comment |
0
0
0
try change this
<div class="menubar" data-scroll="true">
to
<div class="menubar">
answered Nov 13 '18 at 3:40
Nadiya
35
try change this
<div class="menubar" data-scroll="true">
to
<div class="menubar">
answered Nov 13 '18 at 3:40
Nadiya
35
answered Nov 13 '18 at 3:40
Nadiya
35
answered Nov 13 '18 at 3:40
Nadiya
35
answered Nov 13 '18 at 3:40
Nadiya
35
35
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
add a comment |
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
Thank you for your answer, unfortunately when i tried that, the menubar disappeared
– MMC
Nov 13 '18 at 4:37
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
did you apply any style to 'mainmenu' ?
– Nadiya
Nov 14 '18 at 9:35
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
Yes i did apply style on mainmenu.
– MMC
Nov 15 '18 at 1:02
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53272751%2fhow-can-i-change-a-scrolling-menubar-to-a-stable-one%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
Please provide your css and html so we can help you!
– MartinBA
Nov 13 '18 at 2:13
We need your code to fix your problem
– Jack Bashford
Nov 13 '18 at 2:14
I just added some part of the code. Thank you so much!
– MMC
Nov 13 '18 at 2:40