• Resolved worttaenzer

    (@worttaenzer)


    Hello,

    I’ve been trying to center the navigation and give it a width of 1200px, just as the Header Banner. (I want it to be right above the green line and make it just as wide) But whatever I do, all it does is cutting the Navigation bar into two rows, as if some hidden content on the right side is blocking the space.

    This is what it looks like at the moment:
    https://www.bilderhoster.net/27843/7j8myvwr.jpg.html

    And this is my main-navigation code:

    .main-navigation {
    	text-align: center;
    	float: right;
    	clear: right;
    	margin: 16px 0 0 0;
    	margin: 1rem 0 0 0;
    
    }
    
    .main-navigation h1 {
    	font-size: 32px;
    	font-size: 2rem;
    	line-height: 1.25;
    }
    
    .nav-menu {
    	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    	font-style: normal;
    	font-weight: 300;
    	font-size: 18px;
    	font-size: 1.125rem;
    	line-height: 0.3;
    	text-transform: uppercase;
    }
    
    .main-navigation ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    .main-navigation li {
    	float: left;
    	position: relative;
    	margin: 0;
    }
    
    /* Padding around each top level menu option */
    .nav-menu > li a {
    	padding: 12px;
    	padding: .75rem
    }
    
    .main-navigation ul ul li {
    	margin: 0;
    }
    
    .main-navigation ul ul a {
    	padding: 8px 12px; /* Padding around each dropdown menu option */
    	padding: .5rem .75rem;
    }
    
    .main-navigation a {
    	display: block;
    	text-decoration: none;
    	color: #6ca83e; /* Nav bar link color */
    }
    
    .main-navigation a:visited {
    	color: #6ca83e; /* Nav bar link visted color */
    }
    
    .main-navigation a:hover {
    	color: #376216; /* Nav bar link hover color */
    }
    
    .main-navigation ul ul {
    	display: none;
    	position: absolute;
    	left: 0;
    	z-index: 99999;
    	line-height: 1.7;
    	background-color: #6ca83e; /* Nav bar dropdown background color */
    }
    
    .main-navigation ul ul ul {
    	left: 100%;
    	top: 0;
    }
    
    .main-navigation ul ul a {
    	color: #fff; /* Nav bar dropdown link color */
    	width: 14em; /* Nav bar dropdown width */
    }
    
    .main-navigation ul ul a:visited {
    	color: #fff; /* Nav bar dropdown link visited color */
    }
    
    .main-navigation ul ul li {
    }
    
    .main-navigation ul ul :hover > a {
    	color: #376216; /* Nav bar dropdown level 2 link color on level 3 hover */
    	background-color: #344860; /* Nav bar dropdown link background color on hover */
    }
    
    .main-navigation li:hover > a {
    	color: #376216; /* Nav bar link color on hover */
    }
    
    .main-navigation ul ul a:hover {
    	color: #fff; /* Nav bar dropdown link color on hover */
    }
    
    .main-navigation ul li:hover > ul {
    	display: block;
    }
    
    .main-navigation li.current_page_item a,
    .main-navigation li.current-menu-item a {
    }
    
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a,
    .main-navigation .current_page_parent > a {
    	color: #376216; /* Nav bar link color for current menu item or ancestor */
    }
    
    .main-navigation ul ul li.current-menu-item > a,
    .main-navigation ul ul li.current-menu-ancestor > a {
    	color: #376216; /* Nav bar dropdown link color for current menu item */
    }
    
    .main-navigation ul .divider {
    	border-bottom: 1px solid #aaa;
    	height: 0;
    	line-height: 0.0625;
    	overflow: hidden;
    }
    
    .main-navigation ul li.dropdown-header a,
    .main-navigation ul li.current-menu-item ul .dropdown-header a {
    	color: #aaa; /* Nav bar dropdown header color */
    	background-color: #3a3a3a; /* Nav bar dropdown header background color */
    }

    Best wishes,
    Alex

Viewing 9 replies - 1 through 9 (of 9 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    Can you please provide a link to the site so that I can see what’s happening. It’s difficult to work out what’s going on just from an image.

    Thanks for that.

    Thread Starter worttaenzer

    (@worttaenzer)

    Thank you for your quick answer.
    My page is still hidden, due to the working progress but I figured out that the 2 grid layout in the header was causing the issue.
    By now my client changed his mind and decided to want the navigation aligned to the left, like it’s already used in the template, so I luckily don’t need to figure out to how to center it anymore.

    Thanks for wanting to help though.

    Theme Author Anthony Hortin

    (@ahortin)

    No probs. Glad it was all sorted in the end ??

    Thread Starter worttaenzer

    (@worttaenzer)

    Hey,
    I’ve got a question though. I tried to fix it myself but it just wouldn’t work.
    On most of the pages, with long texts, my footer is on the bottom of the page where it belongs, but as soon as I have only really short text (on the pages “G?stebuch” & “Kontakt”) the footer jumps up and leaves some blank white space on the bottom.
    I tried to change the position of the footercontainer & footercreditscontainer, set it to the bottom: 0 and played around with margin settings, but nothing would actually fix it.
    Or do I need to make changes to the contentcontainer?

    Here’s a link to it:
    https://testebene.garten-ist-krieg.de/neues-aus-meinem-garten/

    Theme Author Anthony Hortin

    (@ahortin)

    Here’s a post on how you can get your footer to stick to the bottom of the page.
    https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    Thread Starter worttaenzer

    (@worttaenzer)

    Thanks, I actually did try that before.
    I changed the code a bit, because nothing would happen with the original one.
    #container became maincontentcontainer
    #header became #headercontainer
    #footer became #footercontainer
    I colored these sections so I could make sure I’m using the right div name but still … the footer is not on the bottom. I feel like the #body settings aren’t doing anything.
    https://www.bilderhoster.net/27843/vzttmgah.jpg.html

    Theme Author Anthony Hortin

    (@ahortin)

    Try this…

    #maincontentcontainer {
        min-height: calc(100vh - 356px);
    }

    Please note though, if you change the height of your header or footer, you’ll have to adjust that px amount accordingly as well.

    Thread Starter worttaenzer

    (@worttaenzer)

    This works perfectly. Thank you so much. You really helped me a lot with that.
    Great support!

    Theme Author Anthony Hortin

    (@ahortin)

    My pleasure ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Center Navigation Bar’ is closed to new replies.