WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Centralize the HOME button and the Main Menu (18 posts)

  1. privaldes
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. privaldes
    Member
    Posted 1 year ago #

    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.

  4. privaldes
    Member
    Posted 1 year ago #

    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;
    }

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    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) ?

  6. privaldes
    Member
    Posted 1 year ago #

    ok, I'm sorry ... I will correct it ....

  7. privaldes
    Member
    Posted 1 year ago #

    <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>
  8. privaldes
    Member
    Posted 1 year ago #

    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;
    }
  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    How did the 60% width look?

  10. privaldes
    Member
    Posted 1 year ago #

    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.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  12. privaldes
    Member
    Posted 1 year ago #

    Unfortunately, even with 60% the menu is centered ...

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  14. privaldes
    Member
    Posted 1 year ago #

    Ok guys! Resolved! Thank you for your help!

  15. privaldes
    Member
    Posted 1 year ago #

    Could you please delete this topic?

    Thanks again for your attention!

  16. esmi
    Forum Moderator
    Posted 1 year ago #

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

  17. privaldes
    Member
    Posted 1 year ago #

    Ok, no problem. You can only delete the link to the website to which I referred?

    The link is in my first post in this topic.

  18. esmi
    Forum Moderator
    Posted 1 year ago #

    Sorry but we don't remove links in posts except in extreme circumstances.

Topic Closed

This topic has been closed to new replies.

About this Topic