My theme nav not works correctly

  • Hello,
    I am creating a theme and using bootstrap in the theme i have enqued all styles an scripts and tried walker class for nav menu, but it doesnot solve my broblem correctly because menue does not display in right oreder and makes problem in small size screens, you can get whole theme here and check the header.php file
    I want my header to look like this static header and work corectly from wordpress admin panel.

    <html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<header class="nav-area navbar-fixed-top" >
        <div class="container" >
            <div class="row" >
                <div class="col-md-12 col-xs-12" >
                    <div class="main-menu">
                        <div class="navbar navbar-cus">
                            <div class="navbar-header">
                                <a href="index.html" class="navbar-brand">SAYBER<span>S</span></a>
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>

                            <div class="navbar-collapse collapse">
                                <nav style="background-color: turquoise;">
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a>Home</a></li>
                                        <li><a>Contact</a></li>
                                        <li><a>Blog</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
    • This topic was modified 4 years, 11 months ago by umer2001uf.
Viewing 3 replies - 1 through 3 (of 3 total)

  • There are many themes in the repository that use Bootstrap and have menus that work. Try looking at the code for those, to see how yours is different, if you can’t debug your code. The theme author is responsible for the theme code, so having someone write it for you doesn’t work well.
    Anyway, you don’t actually ask a question, so it’s hard to help you.

    Thread Starter umer2001uf

    (@umer2001uf)

    i tried different themes but none of it works for me,
    and lets change it in to question…

    where should i place`wp_nav_menu( array(
    ‘menu’ => ‘Something custom walker’,
    ‘walker’ => new bootstrap-walker()
    ) );`
    in the header html ?

    <html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<header class="nav-area navbar-fixed-top" >
        <div class="container" >
            <div class="row" >
                <div class="col-md-12 col-xs-12" >
                    <div class="main-menu">
                        <div class="navbar navbar-cus">
                            <div class="navbar-header">
                                <a href="index.html" class="navbar-brand">SAYBER<span>S</span></a>
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>

                            <div class="navbar-collapse collapse">
                                <nav style="background-color: turquoise;">
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a>Home</a></li>
                                        <li><a>Contact</a></li>
                                        <li><a>Blog</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

    The theme should not use the menu parameter of wp_nav_menu(). It should use the theme_location parameter, and the ID that corresponds to the one used in register_nav_menu().
    According to https://developer.www.ads-software.com/reference/functions/wp_nav_menu/
    the walker parameter expects an object, so be sure that’s what you pass.
    As for where to put the call to the menu, that just depends on which part of the HTML it outputs. The trick about looking at other themes is that you read the code and learn, instead of just running the theme and saying “it doesn’t work for me”.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘My theme nav not works correctly’ is closed to new replies.