Centering a fixed nav bar when width is smaller than screen

  • Resolved sophiehboisvert

    (@sophiehboisvert)


    10 years, 8 months ago

    Hey everyone!
    I’m pretty much a total newbie in CSS so please bear with me ??
    I have created a second blog to experiment with my layout: https://hearnshtest07.org
    I am using the Omega theme (don’t know if that matters).
    Ideally, I would like my navigation bar to be the same width as the content & sidebar portion of the page, as it is on this site: https://www.peaceloveshea.com

    I’ve been fiddling with the code for a while and just cannot seem to get it right. Any suggestions on doing this in a way that will render the same look on different screen sizes?

    I’ve tried changing the width% (in the second chunk of code) and it works but puts the entire nav to the side. Then I am able to centre it by changing the ‘left’ property (in the first chunk), but I suspect there is a better way to do it so that it will work on all pages.

    Any help is appreciated! 

    .omega-nav-menu {
position:fixed;
background: #000000;
top: 30px;
left:0px;
margin-right: auto;
margin-left: auto;
height: 50px;
z-index:999999;
padding: 20px 20px;
text-align:center;
}

.omega-nav-menu,
.omega-nav-menu > ul {
	clear: both;
	color: #999;
	letter-spacing: 1px;
	line-height: 1;
	margin: 0;
	padding: 6px 6px;
	width: 100%;
	text-align: center;
}

.omega-nav-menu .menu-item,
.omega-nav-menu .page_item {
	display: inline-block;
	margin: 0;
	padding: 0;
	text-align: center;
}

.omega-nav-menu a {
	border: none;
	color: #918f90;
	display: block;
	padding: 10px 10px;
	position: relative;
}

.omega-nav-menu .sub-menu,
.omega-nav-menu .children {
	left: -9999px;
	margin: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition:    opacity .4s ease-in-out;
	-ms-transition:     opacity .4s ease-in-out;
	-o-transition:      opacity .4s ease-in-out;
	transition:         opacity .4s ease-in-out;
	width: 200px;
	z-index: 99;
}

.omega-nav-menu .sub-menu a,
.omega-nav-menu .children a {
	background: #fff;
	border: 1px solid #eee;
	border-top: none;
	font-size: 14px;
	letter-spacing: 0;
	padding: 10px 10px;
	position: relative;
	width: 200px;
}

.omega-nav-menu .sub-menu .sub-menu,
.omega-nav-menu .children .children {
	margin: -54px 0 0 199px;
}

.omega-nav-menu .menu-item:hover,
.omega-nav-menu .page_item:hover {
	position: static;
}

.omega-nav-menu .menu-item:hover > .sub-menu,
.omega-nav-menu .page_item:hover > .children {
	left: auto;
	opacity: 1;
}

.omega-nav-menu > .first > a {
	padding-left: 0;
}

.omega-nav-menu > .last > a {
	padding-right: 0;
}
Viewing 4 replies - 1 through 4 (of 4 total)

  • This should do it… at least for full browser view.

    .omega-nav-menu {
position: fixed;
background: #000000;
top: 0px;
/* left: 0px;    the margin: 0 auto (below) will help center the navigation container */
margin: 0 auto;
height: 50px;
width: 960px; /* same width as your content below */
z-index: 999999;
padding: 0;
text-align: center;
}
    Thread Starter sophiehboisvert

    (@sophiehboisvert)

    Thanks for the suggestion rachdunn! Sadly it doesn’t seem to work – the nav bar stills spans the width of the entire page and, if I reduce the width%, it still isn’t centred and sticks to the left. Any other ideas?

    [Please don’t bump]

    .omega-nav-menu {
position:fixed;
background: #000000;
top: 30px;
margin: 0 auto;
max-width: 980px;
height: 50px;
z-index:999999;
padding: 20px 20px;
}

    Try this and make sure you don’t have left:0; in there!

    Thread Starter sophiehboisvert

    (@sophiehboisvert)

    YES!!! Lucymothership, thank you so much!! One step closer to making this look like something ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Centering a fixed nav bar when width is smaller than screen’ is closed to new replies.