Top Main Menu background colour

Hello,

How could I have the top main menu’s black background colours on my site pavlikeni.com appear across the entire site’s width on the monitor and not be restricted by the width of the site’s content.The colours are thin red on top of thick black.

Thanks,
Peter

• This topic was modified 10 years by Afterglow.

Hi

Try this css in theme panel > custom code > custom css: http://screencast.com/t/XCiK6aTS

.td-header-container {
width: 100%;
}
.td-header-top-menu, .td-header-header, .menu-main-menu-container {
width: 1021px;
margin-left: auto;
margin-right: auto;
}

Let me know how it goes.
Thanks!

Hello and thank you for your response.

It partially works because the magnifying glass (for searching the site’s content is left too far out to the right) and also, because when you scroll down, that entire line containing the menu, etc. (that you extended to the left and right) contracts back again (when sticking to the top).

Thanks,
Peter

Hi

Sorry for that, I forgot the search button.
Add this css in theme panel to fix the button’s position: http://screencast.com/t/hanSX8aMu

@media(min-width: 768px){
#td-top-search {
margin-top: 0px!important;
position: initial;
}
}

Thanks!

• This reply was modified 10 years by Andrei L..

Hi,

I am sorry but not sure where to put the last code you sent. I have the 1st set in the Custom CSS.

Please advise (unfortunately I am not a programmer).

Thanks,
Peter

Hi

The code must be added in theme panel > custom code > custom css field after the previous code that I’ve provided.

Thanks!

Hi,

Thanks, it works.

Did you notice that those lines contract back to the old size once you scroll down the page? Can they remain unchanged with the scrolling?

Thanks,
Peter

Hi

Add this css in theme panel > custom code > custom css to make the menu full width when page scroll down: http://screencast.com/t/yE1oILfynSKh

.td-header-main-menu.td-affix{
width: 100%;
}

Thanks!

Hello Andrei,

Thanks, that works, however I noticed that when placing the code fixing the position of the magnifying glass (the search tool):

@media(min-width: 768px){
#td-top-search {
margin-top: 0px!important;
position: initial;
}
}

that kills the links and drop-down menus associated with the top main menu items. When I remove the code above, they work, but the search tool goes off to the right again.

Please advise.

Thanks,
Peter

Hi

That happens because of search container display. You can correct that by replacing the previous css with this one:

@media(min-width: 768px){
#td-top-search {
margin-top: 0px!important;
position: initial;
display: inline-block}
}

Please note that this header style wan’t designed to have a full width background and by affecting it’s layout may appear some issues with menus functionality.

Thanks!

Hi,

Thank you very much, it works.

Maybe you can include that in your next releases, because I think visually, the template looks better after the change.

Regards,
Peter

Hi

I’ve added your suggestion on our list and when the time comes our developers will consider it. This may take some time because we have a long implementation list and we take them one by one.

Thanks for your suggestion, have a nice day.

Hello,

The stretched main menu breaks and the color line above it disappears when you scroll down the page and as soon as they hit the upper border of the screen. How can they stay stretched all the time without breaking in the case of the main menu and without disappearing in the case of the color line above it?

Thanks,
Peter

Hello, thanks – there is only 1 problem – the magnifying glass icon jumps to the far right as soon as the menu stops moving on top.

Thanks,
Peter

Hello,

This is where the magnifying glass is in the right spot: http://pavlikeni.com/wp-content/uploads/2017/02/OK.png and this is where it moves to the right after scrolling the site down: http://pavlikeni.com/wp-content/uploads/2017/02/not-OK.png

Thanks,
Peter

Hello,

I am not a programmer and cannot tell whether the existing custom CSS causes this. Here is the entire code and if you notice something, pls let me know.

.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;
}
}

Thanks.

Thanks, but i am not going to scrap the identity of my sites that i built so far and revert to the limited options the theme provides in terms of main menu display. Asking for a stretchable and working mainmenu the way i have it is not much and should be added by the developers for flexibility and convenience.

The last code you were kind to provide is not working properly and that causes the magnifying glass to move, not the prior customizations.

Thanks,
Peter

All the custom code has been provided to me by people in this forum. I did not invent it myself. What that means is that the code provided is incorrect and bugged.

I am not “understanding” actually.

All the time you wasted talking over me could have been used solving the problem. Your “solution” with the refund is frankly ridiculous and offensive.

If you were a bit more concerned with customer service, you would have noticed that MANY online newspapers’ and magazines’ websites have the stretched and fixed on top main menu feature that I have spent so much time begging for here. See http://nypost.com, or http://nytimes.com to name a couple! Are you maybe not following current design trends for the type of websites you offer templates for?

I do not know if you are a developer or an owner, but your response is both inappropriate in terms of common business sense and meaningful customer service.

And again, if the solution you provide is non-working because of prior customization (actually my site does not have customization other than fixing the position of the logo and stretching the main menu, which by the way should be better managed by your template, but they are not), that means that either you or the other developers who have responded are providing bugged code.

And please, do not offend my limited intelligence by quoting your site’s policies as if a policy is not flexible enough to cater to your paying customer’s BASIC and MEANINGFUL requests, which are in line with current design and technical trends, then those policies are as good as crap.

Peter

• This reply was modified 9 years by Afterglow.