WordPress.org

Support

Support » Themes and Templates » [Resolved] Centralize the HOME button and the Main Menu

[Resolved] Centralize the HOME button and the Main Menu

  • Hello Guys, This is the first time I post on this forum and I look forward to that you can help me!

    I have a navigation menu and a home button on the main menu of my site. But I can not center them together … centralizo or the HOME button or menu centralizo … But that would both stay centered.

    Can anyone tell me where I’m wrong?

    The website link is: http://www.shaolinchan.org.br/site2012

Viewing 15 replies - 1 through 15 (of 17 total)
  • To centre elements using margin: 0 auto;, you need to apply widths less than 100%.

    Be careful when adding a width to your navigation, as when pages are added or removed, the width changes and may cause an off-set of centralisation or the navigation to use two lines.

    Hello Andrew,

    I thank you so much for your prompt help.

    I understand your recommendation, but I could not make it work on my website.

    Changed the class “navwrap” to 90% and kept the “margin: 0 auto”, but still could not center the menus.

    If it helps, this is the code that calls the menu:

    <nav role=”navigation”>
    <div class=”navwrap”>
    <ul class=”dropdown-home”>
    <li class=”home”>“>HOME

    <?php wp_nav_menu(array (
    ‘menu’ => ‘Menu Principal’,
    ‘theme_location’ => ‘menu-principal’,
    ‘container’ => ”,
    ‘items_wrap’ => ‘<ul id=”%1$s” class=”dropdown”>%3$s’
    )
    ); ?>
    </div>
    </nav>

    And this is the CSS:

    nav {
    float: left;
    height: 35px;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    background: #a90329;
    }

    .navwrap {
    text-align: center;
    width: 90%;
    margin: 0 auto;
    padding-top: 4px;
    }

    nav ul.dropdown {
    list-style: none;
    float: left;
    padding: 5px 10px 6px 0;
    }

    nav ul.dropdown li {
    display: inline;
    position: relative;
    z-index: 500;
    text-align: left;
    font-size: 14px;
    cursor: default;
    }

    nav ul.dropdown a {
    padding:12px;
    color: #eee;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    cursor: default;
    }

    /* Estilo do link ao passar o mouse */

    nav ul.dropdown li:hover a {
    background: #444;
    padding: 8px 10px 10px 10px;
    height: 18px;
    }

    /* Exibir links em blocos */

    nav ul.dropdown li ul a {
    display: block;
    cursor: pointer;
    }

    /* Submenus dropdown */

    nav ul.dropdown ul {
    list-style: none;
    width: 200px;
    position: absolute;
    z-index:500;
    }

    /* Esconder submenus */

    nav ul.dropdown ul, nav ul.dropdown li:hover ul ul, nav ul.dropdown ul li:hover ul ul {
    display: none;
    }

    /* Exibir submenus ao passar o mouse */

    nav ul.dropdown li:hover ul, nav ul.dropdown ul li:hover ul, nav ul.dropdown ul li ul li:hover ul {
    display: block;
    left: 0;
    top: 26px;
    }

    /* Mudar estilo dos itens do submenu ao passar o mouse */

    nav ul.dropdown li * a:hover {
    background: #666;
    }

    /* Menu home */

    nav ul.dropdown-home {
    list-style: none;
    float: left;
    width: 30px;
    padding: 5px 50px 6px 0;
    }

    nav ul.dropdown-home li.home {
    }

    nav ul.dropdown-home li.home a {
    background: url(images/nav-home.png) no-repeat scroll center top transparent;
    color: #882424;
    height: 43px;
    width: 86px;
    padding: 5px 18px 20px 20px;
    }

    Try a more noticeable value, like 60%.
    Can you wrap your code in backticks, or the code button above your post when you edit it (on this forum) ?

    ok, I’m sorry … I will correct it ….

    <nav role="navigation">
    		<div class="navwrap">
    		<ul class="dropdown-home">
    			<li class="home"><a href="<?php echo get_option('home'); ?>">HOME</a></li>
    		</ul>
    			<?php wp_nav_menu(array (
    					'menu' => 'Menu Principal',
    					'theme_location' => 'menu-principal',
    					'container' => '',
    					'items_wrap' => '<ul id="%1$s" class="dropdown">%3$s</ul>'
    					)
    				    ); ?>
    		</div>
    		</nav>

    CSS:

    nav {
    	float: left;
    	height: 35px;
    	width: 100%;
    	font-size: 14px;
    	font-weight: bold;
    	background: #a90329;
    }
    
    .navwrap {
    	text-align: center;
    	width: 90%;
    	margin: 0 auto;
    	padding-top: 4px;
    }
    
    nav ul.dropdown {
    	list-style: none;
    	float: left;
    	padding: 5px 10px 6px 0;
    }
    
    nav ul.dropdown li {
    	display: inline;
    	position: relative;
    	z-index: 500;
    	text-align: left;
    	font-size: 14px;
    	cursor: default;
    }
    
    nav ul.dropdown a {
    	padding:12px;
    	color: #eee;
    	text-decoration: none;
    	text-shadow: 0 1px 0 #000;
    	cursor: default;
    }
    
    nav ul.dropdown li:hover a {
    	background: #444;
    	padding: 8px 10px 10px 10px;
    	height: 18px;
    }
    
    nav ul.dropdown li ul a {
    	display: block;
    	cursor: pointer;
    }
    
    nav ul.dropdown ul {
    	list-style: none;
    	width: 200px;
    	position: absolute;
    	z-index:500;
    }
    
    nav ul.dropdown ul, nav ul.dropdown li:hover ul ul, nav ul.dropdown ul li:hover ul ul {
    	display: none;
    }
    
    nav ul.dropdown li:hover ul, nav ul.dropdown ul li:hover ul, nav ul.dropdown ul li ul li:hover ul {
    	display: block;
    	left: 0;
    	top: 26px;
    }
    
    nav ul.dropdown li * a:hover {
    	background: #666;
    }
    
    nav ul.dropdown-home {
    	list-style: none;
    	float: left;
    	width: 30px;
    	padding: 5px 50px 6px 0;
    }
    
    nav ul.dropdown-home li.home {
    }
    
    nav ul.dropdown-home li.home a {
    	background: url(images/nav-home.png) no-repeat scroll center top transparent;
    	color: #882424;
    	height: 43px;
    	width: 86px;
    	padding: 5px 18px 20px 20px;
    }

    How did the 60% width look?

    But with a wide 60% ​​chance of happening the error you mentioned before is greater, is not it?

    Be careful when adding a width to your navigation, as when pages are added or removed, the width changes and may cause an off-set of centralisation or the navigation to use two lines.

    Yes, it has a greater chance of error.
    I suggested 60% to test whether the menu will centre, you should estimate the implications when applying your own value.

    Unfortunately, even with 60% the menu is centered …

    WPyogi

    @wpyogi

    Forum Moderator

    Looks like you also need to remove the text-align: center line — so the CSS looks like this:

    .navwrap {
    	width: 60%;
    	margin: 0 auto;
    	padding-top: 4px;
    }

    If you add more menu items, you’ll need to adjust the percentage.

    Ok guys! Resolved! Thank you for your help!

    Could you please delete this topic?

    Thanks again for your attention!

    esmi

    @esmi

    Forum Moderator

    I’m sorry but it is against policy to delete any topics in these forums.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Resolved] Centralize the HOME button and the Main Menu’ is closed to new replies.
Skip to toolbar