领航主题如何添加自定义CSS代码

领航主题虽然方便了新手用户快速搭建专业的官网，但是一些设计可能并不能满足你自己企业的实际需要，如果你会一定的css代码修改，那么可以通过自定义css代码来覆盖他们。

领航主题想要添加自定义css代码有两种方式：

一、主题自定义CSS

操作步骤：WordPress后台 → 外观 → 自定义 → 额外CSS

将你自己修改的CSS代码粘贴进去就可以了。

二、安装子主题

子主题下载：linghang-child.zip （安装方法也是一样的，上传，启用。）

先安装领航子主题，然后WordPress网站后台，外观，主题文件编辑器，style.css文件里面添加你自己的css代码，更新即可。

三、自定义代码演示

1、调整子菜单宽度

例如你想修改主题导航菜单子菜单的宽度，可以尝试添加以下代码：

.primary-menu .sub-menu {
    min-width: 420px !important;
}

2、添加标题区域背景图片

/* 博客文章页标题背景区域 */
.single-post-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://linghang.quhenet.com/wp-content/uploads/2025/11/slide-3.jpg'); /* 背景图片网址 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3; /* 图片透明度 */
    z-index: 0;
}
 /* 隐藏右侧圆形元素，不需要隐藏则不复制下面代码 */
.single-post-header:before {
     background: none;
}

/* 页面标题背景 */
.page-header-wrapper {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), /* 黑色半透明蒙版 */
        url('https://linghang.quhenet.com/wp-content/uploads/2025/11/slide-3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 删除左右圆形元素 */
.page-header-wrapper::before,
.page-header-wrapper::after {
    display: none;
}

3、调整幻灯片的背景遮罩清晰度

/* 调整hero遮罩透明度，修改0.3的值，越小越透明 */
.hero-overlay {
    background: rgba(19, 30, 74, 0.3) !important;
}

提示，遮罩调整太透明的话，白色文字容易和背景重叠看不清文字。

4、设置图片为全宽显示

如果一些设计你打算直接用整张图片铺满网页屏幕来实现，可以在添加图片后为图片添加额外的css类，填入“full-image”，然后添加下面的自定义css代码。

.full-image {
    max-width: 100%;
}
.full-image img {
    margin: 0 auto;
    width: 100%; /* 图片拉伸到全宽，不添加这一行就是原图最大宽度居中显示 */
}