WordPress.org

Forums

[resolved] Centering a fixed nav bar when width is smaller than screen (5 posts)

  1. sophiehboisvert
    Member
    Posted 1 year 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: http://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: http://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;
    }
  2. rd
    Member
    Posted 1 year ago #

    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;
    }
  3. sophiehboisvert
    Member
    Posted 1 year ago #

    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]

  4. lucymothership
    Member
    Posted 1 year ago #

    .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!

  5. sophiehboisvert
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic