Trying to Center Top Navigation Bar [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Making adjustments to the following bigcommerce theme: https://cornerstone-light-demo.mybigcommerce.com and I cant seem to get the top nav (nav.navuser) to center align. I've tried various combinations of text-align:center;, and margin:0 auto; to no avail.

Try the following changes:
.navUser-section.navUser-section--alt {
/* add the following rule */
display: inline-block;
}
.navUser-section--alt {
/* change float:right to float: none */
float: none;
}
.navUser{
/* add the following rule */
text-align:center;
}

Related

Align button horizontally center in the page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How can i align button at center of html body. Any one help me
Page View of button
You can give the button the following CSS code:
button{
margin: 0 auto;
}
You can also use flexbox on the container of the button:
.container{
display: flex;
}
You can then use the following:
button{
margin: auto;
}
Here you go, basic one. You didn't provide a code so we can't provide an answer using your code.
body {
text-align: center
}
<button>center</button>

css background-position conflicts with outer div's background-color [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Css background-position conflicts with outer div's background-color
i.e.:
background-color: yellow;
background-position: xxxxx;
JSFIDDLE
Symptom: line 2 comment will affect the button animation.
Please Uncomment line 2 to see the conflict.
Changes done.
CSS
#content {
background-color: yellow;
position: relative; /* make position relative */
z-index: 0; /* reduce the z-index */
}
Working Fiddle

Bootstrap panel heading styling not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a little problem with CSS styling. For some reason which I can't determine this won't style correctly and I can't edit the colour in CSS. Here is an image to what the actual header looks like and for some reason the background won't style.
Here's my css styling code for the class that it's using:
.panel-heading {
text-align: center;
background-color: #ececb0;
}
Here's my html code for the header:
<div class="panel-heading"><h3 class="title">DeadSwitchand</h3></div>
use !important over the background-color property:
.panel-heading {
text-align: center;
background-color: #ececb0 !important;
}
JsFiddle

A menu with a rare white line, help please [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a css problem.
I would like the white border between the
"end" of the screen away it really is against it.
Jsfiddle:
http://goo.gl/KL5iYJ
You can remove the top border by setting the body's padding and margin to 0, like such:
body {
padding:0px;
margin:0px;
}
This will eliminate the whitespace above and to the sides of your menu.
I don't fully understand what you're asking, but I'm guessing this simple block solves what you are attempting to reach
body {
margin: 0;
padding: 0;
}
Put in your css:
html, body {
margin:0;
padding:0;
}

avoid menu breaking in small window size and let the page scroll [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Here is what I don’t want to happen, in my responsive design:
design http://imgs.ir/imgs/201307/break_2_.png
And want the page scroll.
It’s possible to have a jsfiddle if need.
See if this helps: http://jsfiddle.net/panchroma/2G9ze/
I edited the CSS, adding whitespace:no-wrap to the nav and fine-tuned the results on narrow screens by adding a media query.
CSS changes
.nav-wrapper {
float: right;
white-space: nowrap;
}
#media screen and (max-width: 375px){
.nav-wrapper {
float: left;
min-width:375px;
}
}