Plugin interference with code html css

srvissir
(@alihosseini20368)

1 year, 9 months ago

Hi, I made a menu with html and cs, but when I put it in the header of the site, it gets messed up, and when I disable the
Gutenverse plugin, it gets fixed.

`<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}

.navbar {
overflow: hidden;
background-color: #333;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.subnav {
float: left;
overflow: hidden;
}

.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}

.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}

.subnav-content a {
float: left;
color: white;
text-decoration: none;
}

.subnav-content a:hover {
background-color: #eee;
color: black;
}

.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>

<div class=”navbar”>
Home
<div class=”subnav”>
<button class=”subnavbtn”>About <i class=”fa fa-caret-down”></i></button>
<div class=”subnav-content”>
Company
Team
Careers
</div>
</div>
<div class=”subnav”>
<button class=”subnavbtn”>Services <i class=”fa fa-caret-down”></i></button>
<div class=”subnav-content”>
Bring
Deliver
Package
Express
</div>
</div>
<div class=”subnav”>
<button class=”subnavbtn”>Partners <i class=”fa fa-caret-down”></i></button>
<div class=”subnav-content”>
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>

<div style=”padding:0 16px”>

</div>

</body>
</html>

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

putra1arya
(@putra1arya)

1 year, 9 months ago

Hello @alihosseini20368,
Could you please provide us with a step-by-step explanation of how to replicate the issue you are experiencing?

Thread Starter srvissir
(@alihosseini20368)

1 year, 9 months ago

I created a menu for myself using css and html code and placed it in the site header, when I put it in the site header, it does not appear under the menus, and when I disable the plugin, it is fixed.

Thread Starter srvissir
(@alihosseini20368)

1 year, 9 months ago

screenshot
When I put the menu code inside the html tag and load the page background is white

putra1arya
(@putra1arya)

1 year, 9 months ago

What I mean is how you put that HTML code into your header.
Provide us with a detailed explanation, please.

Thread Starter srvissir
(@alihosseini20368)

1 year, 9 months ago

add section add html
gowinda
(@gowinda)

1 year, 9 months ago
Hi,

suppose you are using themes in wordpress. usually it came with prebuilt styles and structure, so when you apply additional css or custom html code, it can cause some conflict if not placed/written carefully. can you post a screenshot of what the navbar should look like and how it is now? you say the background turn white, if thats the only problem you are facing you can simply put:
```
background-color: red !important;
```
also, this type of navbar can easily be created in wordpress using Gutenverse plugin without any coding. if you are interested i can guide you how to do it.
Thread Starter srvissir
(@alihosseini20368)

1 year, 9 months ago

Thank you if you can help
gowinda
(@gowinda)

1 year, 9 months ago
So, in order to create a nav bar, you need two important step.
1. creating the nav menu. you can do that by going to Appearance > menus.
you can create any menu you need here. to make a dropdown, drag and drop another menu to be under it as shown in the video. you can put custom link or a page you have created prior.

2. putting the nav menu in the header part.

find your header part. you can find it in the editor or by editing your front page. and then put the ‘Nav Menu’ block in the header part.

and then in the settings, find content and select your custom menu. in the settings panel, you can design your nav menu however you like.

if you have more questions, please ask here~
Thread Starter srvissir
(@alihosseini20368)

1 year, 9 months ago

tanx 👌👍
gowinda
(@gowinda)

1 year, 9 months ago
you are welcome!
- This reply was modified 1 year, 9 months ago by gowinda.

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

The topic ‘Plugin interference with code html css’ is closed to new replies.