Search Results for 'header'

Hi,

Simply remove the white color if that is what you use for the header menu background. Example with header menu background set to white
– https://www.screencast.com/t/ImnMI6BI
Background color cleared – https://www.screencast.com/t/RaY2gZJ1b9

Thanks

Hi,

There is only one head tag, this is loaded for all the pages of the website. The head tag is located in the theme header file
– https://www.screencast.com/t/A9NoDpXB
So enter your code there and it will be loaded on the whole website.

Thanks

Hello,

1,2)Try the code below and place it in Theme panel -> Custom CSS area

@media(max-width:767px){
.td-header-wrap {
background-color:white;
}
.td-search-icon i{
color:black;
}
}
#td-top-mobile-toggle i{
color: black;
}

The result is here -> https://www.screencast.com/t/8gY06w25n

3)If you want to change the Back to Top position button you should use the code below to have control over it.

.td-scroll-up {
bottom: 24px;
left: 4px;
opacity: 0.7;
}

The result is here -> https://www.screencast.com/t/NzEcs7EXZl

Thanks.

Hi,

The top menu cannot display a mega-menu, it is limited to simple drop down menus. The header main menu can display mega-menus
– https://forum.tagdiv.com/mega-menu/
What you want is to display the menu items in multiple columns instead of all of them vertically. You could try with CSS, make tests and see if it works properly. A similar topic here
– https://forum.tagdiv.com/topic/menu-items-split-in-2-columns/

Thanks

Hi,

Glad it worked. The transparent header can be achieved by selecting the overlay menu page template
– https://www.screencast.com/t/hIueDdEK
Then the header will be transparent and overlay at the top of the page.

Thanks

Hi,

I see you have used the flex block in the page. Note that this block can be configured as you want by device. So for example if you want to display 3 modules per as you do now, it will look good on desktop. But on mobile it will not, so display fewer modules per row on mobile
– https://www.screencast.com/t/23hFY2P2
– https://www.screencast.com/t/RPlZLr9Ljzc
One module per row would be suited for mobile.

The page template you are using is the overlay template, this will position the header over the page content, in this case over the slider. This template would not be the best to use if you want to display a slide below the header. These are some demos that use it, that is how it should be used if possible
– https://demo.tagdiv.com/newspaper_spa/
– https://demo.tagdiv.com/newspaper_smart_app/
– https://demo.tagdiv.com/newspaper_construction/
In your case it would be like this, with no background color
– https://www.screencast.com/t/b5PoXxMK

You should consider changing the page template for better results
– https://www.screencast.com/t/1cMUKPafR

Thanks

Hello blasofsky,

Please keep in mind that we do not recommend to increase the logo section because the theme layout might be easily broken. I suggest you change the header style to another one which displays the logo in full-width, like header style 10.

Thanks for your understanding!

Hi,

So you don’t remember where exactly you entered that code. Maybe check the theme panel custom code sections, analytics section as well. Check the theme header file, it could be loading in the head
– https://www.screencast.com/t/AAghZTCxB8
Check your child theme if you have one active.

Thanks

Hello,

Sorry but there is no tutorial at the moment for landing pages. You have to use the multi-purpose elements from the tagdiv composer.
First, you can use a blank page template: https://www.screencast.com/t/vhw5VqKcp so your page will not show the header or footer. Then you can start building your page with the tagdiv. These few videos should help:

Thanks.

Hello,

You can use this custom css in the theme panel to make the modifications you mention:

.td-header-style-1 .td-header-sp-recs, .td-header-style-1 .td-header-sp-logo {
margin-bottom: 0px!important;
}
.td-header-style-1 .td-header-sp-logo{
margin:0!important;
}
.td-header-sp-logo img{
margin:0
}

It could need a bit of adjusting for responsiveness on other devices though

Thanks.

Hello,

‘You’ll be the judge’ is not a logo but rather the header ad. Please check the header ad spot.

Thank you!

Then use method number 2 maybe, but take note that all the headers will automatically be styled like that if you use it. Unless maybe you can make the code more precise.

You could try and add the styles as boxes in the WordPress editor, there are some online guides you can follow
– http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/
Or maybe try some plugins that can offer heading styles to choose from or maybe add your own.

Hi,

The template design has some opacity transitions in the design for the top header part
– https://www.screencast.com/t/UbRUp2orZ1
There is a 2 second opacity transition for the background image, try removing this transition for mobile (Advanced CSS phones section)

body.single_template_8 .td-backstretch {
transition:none;
}

Check if this has any effect.