Here is the entire code I have been provided with. I did not invent it myself. I am not a programmer. It was given to me in this forum.
.td-header-style-1 .td-header-top-menu {
top: 0;
}
@media(min-width:1021px){.td-header-style-1 .td-header-row {
width: 1023px;
margin-left: auto;
margin-right: auto;
}
}
@media(max-width:1021px){.td-header-style-1 .td-header-row {
width: 1023px;
margin-left: auto;
margin-right: auto;
}
}
.td-header-menu-wrap {
background-color: #000;
min-height: 48px;
}
.td-header-style-1 .td-header-row {
width: 1030px;
margin-left: auto;
margin-right: auto;
}
.td-header-sp-logo {
width: 500px;
position: relative;
margin-bottom: 8px;
margin-top: 8px;
}
.td-header-sp-rec {
float: right;
margin-bottom: 8px;
margin-top: 8px;
width: 468px;
position: relative;
}
@media (min-width: 768px) {
#td-top-search {
position: absolute!important;
top: 10%;
}
}
.td-header-container {
width: 100%;
}
@media(min-width: 768px) {
#td-top-search {
margin-top: 0!important;
position: inherit;
display: inline-block}
}
.td-header-menu-wrap:before {
background-color: #c00000;
content: “”;
display: block;
height: 4px;
}
.td-header-border:before {
height: 0;
}
.td-trending-now-wrapper {
background-color: #FFFF00;
height: auto!important;
}
.td-container-border > .td-pb-row:first-child .wpb_wrapper .td_block_wrap:nth-of-type(1) {
background-color: #FFFFFF;
}
@media(max-width: 768px){
.td-header-sp-rec,
.td-header-style-1 .td-header-row {
width: 100%!important;
}
.td-main-menu-logo img{
width: 75%;
}
}
.td-header-style-1 .td-header-main-menu.td-affix {
width: auto;
border-top: 4px solid #c00000 ;
}
@media(min-width: 1024px){
.td-header-style-1 .td-affix #td-header-menu {
width: 1030px;
margin: 0 auto;
}
}
@media(min-width:768px)and (max-width: 1023px){
.td-header-style-1 .td-affix #td-header-menu {
width: 756px;
margin: 0 auto;
}
}
Here is the entire code I have been provided with. I did not invent it myself. I am not a programmer. It has given to me in this forum.
.td-header-style-1 .td-header-top-menu {
top: 0;
}
@media(min-width:1021px){.td-header-style-1 .td-header-row {
width: 1023px;
margin-left: auto;
margin-right: auto;
}
}
@media(max-width:1021px){.td-header-style-1 .td-header-row {
width: 1023px;
margin-left: auto;
margin-right: auto;
}
}
.td-header-menu-wrap {
background-color: #000;
min-height: 48px;
}
.td-header-style-1 .td-header-row {
width: 1030px;
margin-left: auto;
margin-right: auto;
}
.td-header-sp-logo {
width: 500px;
position: relative;
margin-bottom: 8px;
margin-top: 8px;
}
.td-header-sp-rec {
float: right;
margin-bottom: 8px;
margin-top: 8px;
width: 468px;
position: relative;
}
@media (min-width: 768px) {
#td-top-search {
position: absolute!important;
top: 10%;
}
}
.td-header-container {
width: 100%;
}
@media(min-width: 768px) {
#td-top-search {
margin-top: 0!important;
position: inherit;
display: inline-block}
}
.td-header-menu-wrap:before {
background-color: #c00000;
content: “”;
display: block;
height: 4px;
}
.td-header-border:before {
height: 0;
}
.td-trending-now-wrapper {
background-color: #FFFF00;
height: auto!important;
}
.td-container-border > .td-pb-row:first-child .wpb_wrapper .td_block_wrap:nth-of-type(1) {
background-color: #FFFFFF;
}
@media(max-width: 768px){
.td-header-sp-rec,
.td-header-style-1 .td-header-row {
width: 100%!important;
}
.td-main-menu-logo img{
width: 75%;
}
}
.td-header-style-1 .td-header-main-menu.td-affix {
width: auto;
border-top: 4px solid #c00000 ;
}
@media(min-width: 1024px){
.td-header-style-1 .td-affix #td-header-menu {
width: 1030px;
margin: 0 auto;
}
}
@media(min-width:768px)and (max-width: 1023px){
.td-header-style-1 .td-affix #td-header-menu {
width: 756px;
margin: 0 auto;
}
}
Hello,
The menu was not meant to be modified in the way you want it. The path was not clear from the start and you cannot change the css broken into many pieces without knowing the end of the project. This type of approach leads to this kind of bumps that cannot be overcome. The css got too complicated because of your multiple requests for css customization codes and provided by multiple people. The only proper fix for this is to scratch the css and hire a developer if you want to customize the headers as customization is not part of the theme support. The services you require fall beyond what the theme support can offer you. This type of customization usually takes quite a bit of time and we cannot allow too much time on a single request as we have lots of messages to answer to. Please understand we try to help out where we can but we are not a customization department. If you are unsatisfied with our theme or our theme support, we have offered your money back as a sign of good will.
Our theme offers 10 header styles to choose from. Header style 10 already provides the customization you require out of the box. You can simply choose style 10 and remove the custom css for your current header style. This should have been the first step to take in your goal.
Thank you for your patience and understanding.
