how can I make bottom navigation full width?

  • I’ve troubleshooted this code for hours. I used https://premium.wpmudev.org/blog/move-wordpress-theme-menus/ to help move the navigation bar to the bottom. It is using the Adament theme. When the navi bar is at the top, it displays full width but when I put it at the bottom it doesnt do full width anymore. How can I fix this? Here’s the code:

    .site-header .container {
    background-color: #121212;
    position:fixed;
    bottom:0;
    left: 0;
    height:100px;
    width:100% !important;

    }

    .main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    margin-top:5px;
    }
    .main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }

    Also, the mobile view toggle is not working anymore (the menu wont open) how can I fix this?

    /* Small menu */
    .menu-toggle {
    cursor: pointer;
    display: none;
    background: #fff;
    border: none;
    }

    .menu-toggle:hover{
    background: #fff;
    box-shadow: none;
    border:none;
    }

    @media screen and (max-width: 767px) {
    .menu-toggle,
    .main-navigation.toggled .nav-menu {
    display: block;
    }

    .main-navigation ul {
    display: none;
    }
    }

Viewing 15 replies - 1 through 15 (of 20 total)

  • Link please

    Thread Starter chas0unique

    (@chas0unique)

    this is the link

    Add this lines (Child Theme style.css)

    .hfeed.site {
  position: relative;
}
.home #masthead {
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 100;
}

    Update this lines
    Line num : 371 (Child Theme style.css)

    .container {
  background-color: #121212;
  bottom: 0;
  height: 100px;
  left: 0;
}

    Try that and let me know

    Thread Starter chas0unique

    (@chas0unique)

    just noticed the navigation links are not showing up on the other pages, only the home page.

    Yes i notice too

    Can you access your admin panel

    Thread Starter chas0unique

    (@chas0unique)

    yes, I just logged out and back in using the admin panel

    Just try to update your permalink

    Thread Starter chas0unique

    (@chas0unique)

    Issue not resolved.

    Disable all plugin then try it

    Can you please share your footer.php code

    Thread Starter chas0unique

    (@chas0unique)

    still not working

    Thread Starter chas0unique

    (@chas0unique)

    <?php
    /**
    * The template for displaying the footer.
    *
    * Contains the closing of the #content div and all content after
    *
    * @package fabframe
    */
    ?>

    </div><!– #content –>
    <?php if (!is_front_page()){ ?>
    <div id=”bottom”>
    <div class=”container”> <div class=”row”>
    <?php if ( !function_exists(‘dynamic_sidebar’)
    || !dynamic_sidebar(“Footer”) ) : ?>
    <?php endif; ?>
    </div></div>
    </div>
    <?php } ?>
    <footer id=”colophon” class=”site-footer” role=”contentinfo”>
    <div class=”container”><div class=”row”>
    <div class=”site-info clearfix”>
    <div class=”fcred col-md-6″>
    Copyright © <?php echo date(‘Y’);?> ” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?> – <?php bloginfo(‘description’); ?>
    </div>
    <div class=”fcredr col-md-6″>
    <?php ?>Powered by | Prolific Xpressionz
    </div>
    </div><!– .site-info –>
    </div></div>
    </footer><!– #colophon –>
    </div><!– #page –>

    <?php wp_footer(); ?>

    </body>
    </html>

    Can you please share your footer.php code using https://pastebin.com/

    Its my lunch time i ll back to you

    Get backup and replace this code 

    <?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after
*
* @package fabframe
*/
?>

</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="container"><div class="row">
<div class="site-info clearfix">
<div class="fcred col-md-6">
Copyright ? <?php echo date('Y');?> " title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
</div>
<div class="fcredr col-md-6">
<?php ?>Powered by | Prolific Xpressionz
</div>
</div><!-- .site-info -->
</div></div>
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

    Let me know

    Thread Starter chas0unique

    (@chas0unique)

    It fix the about page and booking page. The others are still not showing the navigation bar. And it still is not displaying 100% full width

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘how can I make bottom navigation full width?’ is closed to new replies.