Php 当用户在某个页面上时，如何动态加宽导航栏

我正在做一个使用Wordpress插件LearnDash的项目。在这个插件中，创建了一个导航栏，其中包含指向某些课程的链接。这些课一直上到第15课

现在的问题是，第14课和第15课从第1-13课下面的一行开始，在导航栏之外。当用户位于此特定页面上时，如何使导航栏动态加宽

有什么想法吗？提前谢谢

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage WP_Forge
 * @since WP-Forge 5.5.0.1
 */

namespace hmba;
include 'page-templates/HMBA_Funcs.php';

/* catch errors and report if in local enviorment. */
if (isLocalhost()) {
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
}

function getLessonNav($pillars, $pillarCurrent, $lessonCurrent) {
    foreach ($pillars as $key => $pillar) {
        if (strpos($pillar['url'], $pillarCurrent) && array_key_exists('lessons', $pillar)) {
            return $pillar['lessons'];
        }
    }
}

// $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
// get the current url.
$current_path = $_SERVER[REQUEST_URI]; 
// $current_path = '/pillar1-lesson1/';
$current_path = getPath($current_path);
$pillarCurrent = $current_path['pillar'];
$lessonCurrent = $current_path['lesson'];

$lessons_nav = getLessonNav($pillars, $pillarCurrent, $lessonCurrent);

get_header(); ?>

    <style>
        .pillars .top-bar .name {
            background-color: #a54399;
            border-radius: 29px;
            margin: 0 5px;
            float: left;
        }
        .pillars .top-bar .name a {
            color: #ffffff !important;
            line-height: 17px !important;
            padding: 4px 15px !important;
        }
        .pillars .top-bar .name.current {
            background-color: #e99504;
        }
        .pillars .top-bar .name:hover {
            background-color: #e99504;
        }
        .entry-title {
            display: none;
        }
        section.content_wrap.row .top-bar {
            background-color: #ffffff;
        }
        .nav_wrap{
            background-color:#ffffff;
        }
        nav.lessons-bar {
            background-color: #7a7a7a;
            height: 35px;
        }
        .lessons-bar ul.title-area {
            list-style-type: none;
        }
        .lessons-bar li.name {
            float: left;
            padding: 5px 10px;
        }
        .lessons-bar li.name a{
            color: #ffffff !important;
        }
        .pillars .lessons-bar .name.current,
        .pillars .lessons-bar .name:hover       {
            background-color: #008c99;
        }

        /* learn dash style */
        .entry-content #learndash_lesson_topics_list > div {
            border: none;
            border-radius: 0;
            box-shadow: none;
            margin-bottom: 0;
        }
        .entry-content #learndash_lesson_topics_list .topic {
            background-color: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;    
        }
        .learndash_topic_dots .topic-header {
            background-color: #ccf6f4;
            padding: 10px;
        }
        .entry-content .learndash .topic-notcompleted span {
            background: none;
            padding-left: 0px; 
            display: block;
            text-align: center;
            color: #444444;
            font-size: 22px;
        }

    </style>
        <div id="content" class="medium-12 large-12 columns pillars" role="main">

        <div class="nav_wrap row">

            <nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">
                <ul class="title-area">
                <?php foreach ($pillars as $key => $tile) {  ?>
                    <li class="name <?php if (strpos($tile['url'], $pillarCurrent)) echo 'current' ?>">
                        <a href="<?php echo $tile['url'] ?>"><?php echo $tile['name'] ?></a>
                    </li>
                <?php } ?>
                </ul>
            </nav>   

            <nav class="lessons-bar" data-topbar data-options="mobile_show_parent_link: true">
                <ul class="title-area">
                <?php if ($lessons_nav) foreach ($lessons_nav as $key => $tile) {  ?>
                    <li class="name <?php if (strpos($tile['url'], $lessonCurrent)) echo 'current' ?>">
                        <a href="<?php echo $tile['url'] ?>"><?php echo $tile['name'] ?></a>
                    </li>
                <?php } ?>
                </ul>
            </nav>   

        </div>


            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( 'comments.php', true ); ?>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->

<?php get_footer(); ?>

.支柱.顶杆.名称{
背景色：#a54399；
边界半径：29px；
利润率：0.5px；
浮动：左；
}
.柱子.顶杆.名字a{
颜色：#ffffff！重要；
线高：17px！重要；
填充：4px15px！重要；
}
.支柱.顶栏.名称.当前{
背景色：#e99504；
}
.支柱.顶栏.名称：悬停{
背景色：#e99504；
}
.参赛作品名称{
显示：无；
}
section.content\u wrap.row.顶部栏{
背景色：#ffffff；
}
.nav_包装{
背景色：#ffffff；
}
导航栏{
背景色：#7a7a；
高度：35px；
}
.课程栏ul.标题区{
列表样式类型：无；
}
.李先生{
浮动：左；
填充物：5px10px；
}
例如：请说出你的名字{
颜色：#ffffff！重要；
}
.支柱.课程栏.名称.当前，
.支柱.课程栏.名称：悬停{
背景色：#008c99；
}
/*学习短跑风格*/
.条目内容#learndash_课程(主题)列表>div{
边界：无；
边界半径：0；
盒影：无；
页边距底部：0；
}
.entry内容#learndash课程(主题)列表.主题{
背景色：#FFFFFF；
边框：1px实心#DDDDDD；
边界半径：4px；
盒影：0 1px 1px rgba（0,0,0,0.05）；
边缘底部：20px；
}
.learndash_主题_点。主题标题{
背景色：#ccf6f4；
填充：10px；
}
.entry content.learndash.topic未完成span{
背景：无；
左侧填充：0px；
显示：块；
文本对齐：居中；
颜色：#4444；
字体大小：22px；
}

我相信您可以通过在主容器页面上放置一个类来实现这一点，如果它当前位于某个页面上。有一个内置的功能，它可以告诉你什么页面，你目前是

您可以尝试这样做：

<div id="page" class="hfeed site <?php if(is_page( 'lesson-1-page' )) echo 'wide-content';?>"> 

参考资料：
你能给我们提供一些代码让我们看看吗？
.wide-content {
  width: "specify-your-wider-width-here";
}