Hello,
May I ask for some guidance and help, please?
For my http://brookline.com, how do I integrate any given image as a background image in the Header, so it appears like it does on this website: https://glkzagreb95.hr/?
Please note that above their main menu there is a field, which is not 100% transparent (how do I achieve that?), on top of which the logo and other info is displayed. The golf course background image appears also below their main menu.
Where on https://glkzagreb95.hr/ the golf course image finishes, if implemented on my site, would follow the “Trending now” news ticker.
Please advise how to accomplish the same appearance?
Please be advised that my site has a custom css code as follows:
.td-header-style-1 .td-header-top-menu {
top: 0;
}
.td-header-top-menu{
padding-left: 12px!important;
}
.td-header-sp-top-menu{ float:left!important; }
@media(min-width:1021px){.td-header-style-1 .td-header-row {
width: 1023px;
margin-left: auto;
margin-right: auto;
}
}
@media(min-width:1021px){.td-header-style-1 .td-header-row {
width: 1023px;
margin-left: auto;
margin-right: auto;
}
}
.td-header-menu-wrap {
background-color: #28B775;
min-height: 48px;
}
.td-header-style-1 .td-header-row {
width: 1030px;
margin-left: auto;
margin-right: auto;
}
.td-header-sp-logo {
width: 460px;
float: left;
position: relative;
margin-left: 0;
margin-bottom: -4px;
margin-top: -4px;
}
.td-header-sp-rec {
float: right;
margin-bottom: -4px;
margin-top: -4px;
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: #000000;
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%;
}
}
@media (max-width: 768px){
.td-main-menu-logo img {
width: initial!important;
}
}
.td-header-style-1 .td-header-main-menu.td-affix {
width: auto;
border-top: 4px solid #000000 ;
}
@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;
}
}
I appreciate your help.
Thanks,
Peter
Hello,
Unfortunately, the theme does not have any such an option that allows you to use a header menu with overlay and background image, sorry! If you like, you can try to use the code below and place it in the Theme panel -> Custom CSS area.
The code is ->
.td-header-header{
background-image: url(http://localhost/spitzu_2/wp-content/uploads/2018/09/p4.jpg);
}
.td-header-style-1 .td-header-row {
width: 100%;
background-size:cover;
}The result is here -> https://www.screencast.com/t/vEy6ZPQuMGkr
Thanks for the message!
Thanks, but that does not remotely resemble the example I referenced in my message.
P.
Hello,
Unfortunately, please notice that as you want to achieve with Newsmag involves doing such an additional customization and we cannot afford to do that because involves time-consuming and also, we do not have any custom work department, sorry! I suggest you take a look at our Newspaper theme which is more powerful than Newsmag and which allows you to create an overlay menu at your homepage. As an example, you can check our demo preview from here -> https://demo.tagdiv.com/newspaper_living_mag/
Thanks for your understanding!
