Help with Custom Theme Navbar

  • Hello, I have taken over administration of the website for the company I work for. The WP site was created w a custom theme by a developer around 2 years ago. I am the one the currently does updates to content, etc. And I recently added a static page that the owners want to be included in the navbar. I can easily add the page via customizer for menus. However, when I do this the newest item is displayed under the inline logo that is in the middle of the navigation. I have looked a little deeper and see that bootstrap was used to create the theme. The php that generates the main navigation is here:

    <nav class=”navbar navbar-expand-lg p-0 d-none d-lg-block”>

    <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#main-nav” aria-controls=”” aria-expanded=”false” aria-label=”Toggle navigation”>
    <span class=”navbar-toggler-icon”></span>
    </button>

    <?php $cartCnt = WC()->cart->get_cart_contents_count();
    if($cartCnt > 0): ?>

    <div class=”cart-cont d-inline-block d-md-none”>

    ” title=”<?php _e( ‘View your shopping cart’ ); ?>”>
    <span class=”icon”></span> (<?php echo WC()->cart->get_cart_contents_count();?>)

    </div>
    <?php endif; ?>

    <?php
    wp_nav_menu(array(
    ‘theme_location’ => ‘primary’,
    ‘container’ => ‘div’,
    ‘container_id’ => ‘main-nav’,
    ‘container_class’ => ‘collapse navbar-collapse pt-4 pt-md-5 pb-5’,
    ‘menu_id’ => false,
    ‘menu_class’ => ‘navbar-nav pt-2 pb-2’,
    ‘depth’ => 3,
    ‘fallback_cb’ => ‘wp_bootstrap_navwalker::fallback’,
    ‘walker’ => new wp_bootstrap_navwalker()
    ));
    ?>

    </nav>

    And when I look in the CSS under navbar-nav I do see that there are some behaviors in there for the nth-child(5) & nth-child(6) li items in the navbar that aligns them right and padding on the left (and the regular li items being left of logo), with the inline logo being center. So when I add the new “Journal” link to the navbar it automatically bumps it to the left with the regular li styles (aligned left). I had assumed that if I added a nth-child(7) after the others and included in the same style values it would resolve it. The total number of li items including the inline logo is 6, with the new addition of the “Journal” link would be 7. I tried it and it did not work. I have since reverted the css to the original. I am wondering if I am missing something? It seems like it should be simple and I’ve been a bit stumped. I am new to CSS and PHP and have not learned bootstrap yet. If anyone has any suggestions I’m all ears. I’ve included the CSS below, thanks so much.

    .navbar-nav{display:block}header#masthead #main-nav ul,header#masthead #main-mobile-nav ul{width:100%;padding:0}header#masthead #main-nav li,header#masthead #main-mobile-nav li{padding:0;display:inline-block;min-height:10.5rem}header#masthead #main-nav li a,header#masthead #main-mobile-nav li a{display:inline-block;padding-top:4.75rem;padding-bottom:4.75rem;padding-right:2.5rem;padding-left:0}header#masthead #main-nav li a:hover,header#masthead #main-mobile-nav li a:hover{font-weight:inherit !important;text-decoration:underline;color:inherit}header#masthead #main-nav li:nth-child(5),header#masthead #main-nav li:nth-child(6),header#masthead #main-mobile-nav li:nth-child(5),header#masthead #main-mobile-nav li:nth-child(6){float:right !important;text-align:right;padding-right:0;padding-left:3.25rem}header#masthead #main-nav li:nth-child(5) a,header#masthead #main-nav li:nth-child(6) a,header#masthead #main-mobile-nav li:nth-child(5) a,header#masthead #main-mobile-nav li:nth-child(6) a{padding-right:0}@media screen and (max-width: 992px){header#masthead #main-nav li:nth-child(5),header#masthead #main-nav li:nth-child(6),header#masthead #main-mobile-nav li:nth-child(5),header#masthead #main-mobile-nav li:nth-child(6){text-align:left}}header#masthead #main-nav li.current_page_item>a,header#masthead #main-mobile-nav li.current_page_item>a{text-decoration:underline}header#masthead #main-nav li.current-page-ancestor>a,header#masthead #main-mobile-nav li.current-page-ancestor>a{text-decoration:underline}header#masthead #main-nav li.home-logo,header#masthead #main-mobile-nav li.home-logo{position:absolute;left:51%;width:15rem;min-height:10.5rem;margin-left:-8.5rem}header#masthead #main-nav li.home-logo a,header#masthead #main-mobile-nav li.home-logo a{min-height:10.5rem;font-size:0;padding:0;display:block;background-image:url(img/screendoor-logo-old.svg);background-position:center center;background-repeat:no-repeat;background-size:100% auto;height:100%}@media screen and (max-width: 992px){header#masthead #main-nav li.home-logo,header#masthead #main-mobile-nav li.home-logo{display:none}}@media screen and (max-width: 992px){header#masthead{padding:1rem}header#masthead #main-nav li,header#masthead #main-mobile-nav li{display:block;min-height:auto}header#masthead #main-nav li:nth-child(5),header#masthead #main-nav li:nth-child(6),header#masthead #main-mobile-nav li:nth-child(5),header#masthead #main-mobile-nav li:nth-child(6){float:none !important;padding-left:0}header#masthead #main-nav li a,header#masthead #main-mobile-nav li a{padding:0.5rem 1.1rem}}.mobile-home-link{height:3rem;vertical-align:middle}.mobile-home-link a{display:block;height:100%;text-decoration:none}.mobile-home-link a:hover{text-decoration:none}@media screen and (max-width: 992px){.mobile-home-link{width:15%;margin:0 0 0 35%}}@media screen and (max-width: 657px){.mobile-home-link{width:23%;margin:0 0 0 24%}}.navbar-nav>li.current_page_item>a{color:#3b64af !important;font-weight:400 !important}.home .mobile-home-link{display:none !important}.navbar-light .navbar-toggler-icon{background-image:url(img/menu-toggle.svg) !important}@media screen and (max-width: 992px){.navbar{padding-top:0.5rem !important;padding-bottom:0.75rem !important;background-image:url(img/screendoor-logo-old.svg);background-position:50% 5px;background-repeat:no-repeat;background-size:80px auto}}@media screen and (max-width: 992px){body.home .navbar{background-image:none}}body.home header#masthead{background-color:transparent !important}body.home header#masthead #main-nav ul{text-align:center}body.home header#masthead #main-nav ul li{display:inline-block;float:none !important;padding:0;min-height:6rem}body.home header#masthead #main-nav ul li:nth-child(5),body.home header#masthead #main-nav ul li:nth-child(6){float:none}body.home header#masthead #main-nav ul li a{min-height:6rem;padding:3rem 1rem}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi leraji,

    As you mentioned adding styling for nth-child(7) should work and is working for me.

    I setup a CodePen demo here – https://codepen.io/michaelburrows/pen/MWyqdmd

    Does this work if you update the CSS in your theme?

    Thread Starter leraji

    (@leraji)

    That’s exactly what I want in your demo! I just added the css for the nth-child(7) in the same 2 spots you did, and it still is appearing underneath the inline logo in the center. I double checked in the theme editor of the CSS to make sure that it is updated, and the changes are in there. I am not sure why it’s not working. :-/

    Ok it should be working then, sorry but I have to ask did you clear the browser cache?

    Thread Starter leraji

    (@leraji)

    Well now I feel dumb… I was so frustrated with it and did indeed forget to clear my cache, since I was through a VPN I had to clear that and it showed up fine. I was so frustrated I forgot the most basic thing. Facepalm! Thank you so much Buzilla for the help, I did have a syntax error the first go round. I appreciate you taking the time to reply and setup the demo for me. Have a great weekend and thanks again!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with Custom Theme Navbar’ is closed to new replies.