Hi,
I am using responsive site. I have implemented this code in theme panel-> custom code but still unable to get top menu bar on mobile.
.td-header-style-12 .top-header-menu > li, .td-header-style-12 .td-header-sp-top-menu, .td-header-style-12 .td-header-sp-top-widget {
line-height: 37px; !important;
}
@media (max-width: 767px) {
.td-header-style-6 .td-top-menu-full {
display: block;
height: auto;
padding: 0 16px;
}
.td-header-style-6 .td-top-menu-full .td-header-sp-top-menu {
height: auto;
}
.td-header-sp-top-menu .top-header-menu {
text-align: center;
}
.single_template_6 .td-header-wrap {
height: 450px;
}
.td-post-template-6 .td-post-header {
bottom: -50px;
}
.td-full-screen-header-image-wrap {
top: 50px !important;
}
}
@media (max-width: 497px) {
.td-post-template-6 .td-post-header {
bottom: -100px !important;
}
.td-full-screen-header-image-wrap {
top: 100px !important;
}
}
Please provide a link to your site so I can inspect it
Thanks.
also i want to make top menu bar sticky like main menu
Hi,
You can try a code like the one provided below. It will make the top menu display on mobile, and be sticky as well
– https://www.screencast.com/t/imk5KSLM
The code must be entered in Theme panel->Advanced CSS in then phones section
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: block!important;
}
.body-td-affix .td-header-top-menu-full {
position:fixed;
top:54px;
}
Thanks
Hi, the code doesn’t fit on my website.
I’m using Style 11 header annd I would like excatly the same result than Aaakash
– Sticky top bar
– Top bar AND Menu bar menus both appearing in mobile view
Here is the result I obtained on https://www.gogin.eu/gogin_new/en/
https://www.dropbox.com/s/wvgsw4l1q51awq5/2019-07-02_11-54-44.jpg
The top bar overlays the main menu and is shifted to the left. Also, the top bar menu does not appear in the mobile menu?
Any solution? Thanks in advance for your help!
Hi,
I modified that code, so now the top menu appears on mobile – http://prntscr.com/o9j62r
If you want to use the sticky code from above as well, the result will be like this, on sticky mode – http://prntscr.com/o9j6h8
Here is the code
@media (max-width: 767px){
.td-header-top-menu,
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: block!important;
text-align: center;
}
.td-wpml .menu-top-container .top-header-menu > li {
display:inline-block;
}
.td-wpml .menu-top-container .top-header-menu > li a {
margin-right: 16px;
}
.body-td-affix .td-header-top-menu-full {
position:fixed;
top:54px;
}}
If needed I could modify this code. Let me know.
I should note that with the cloud header templates you can design the header on both desktop and mobile, both default mode and sticky mode. These are templates built by us that can be imported and modified if needed
– https://cloud.tagdiv.com/#/load/Headers
You can also build your own using a blank header template – http://prntscr.com/o8vge6
Here are some articles – https://tagdiv.com/newspaper-theme-customize-the-header-manager/
– https://tagdiv.com/header-main-menu-newspaper-theme/
And a guide about the cloud plugin – https://forum.tagdiv.com/tagdiv-cloud-library-plugin/
Thanks
Thanks so much for your help but… well… you see… I would have have preferred to see the menu appearing in the hamburger menu of the mobile vue.
Do you think it’s possible?
Could you propose me something?
**And what about the sticky top bar in desktop mode I was looking for?
I must confess I’m not accustomed with your Cloud Templates (wich seemms great). And I’m affraid it could lead me to errors in such a “speedy” project.
For a following project I have to realize starting next week… I swear I will dive in it 🙂 !
Thanks again!
That is not possible, the menu that is displayed inside the menu modal is the header main menu – http://prntscr.com/oaeely
I forgot to mention that there is currently an issue with the sub-menu arrows not appearing on responsive mobile, please enter this code as well to make theme visible
– http://prntscr.com/oaefia
The issue will be permanently solved in the next update. here is the code
.td-mobile-content .td-icon-menu-right {
display: inline-block;
}
If you should consider using a cloud header template, then it would be possible to set any menu you want on mobile – http://prntscr.com/oaegxz regardless of the menus you use on desktop.
These are cloud header templates designed by us – https://cloud.tagdiv.com/#/load/Headers which can be imported and customized. You can also create templates from blank
– http://prntscr.com/oaei2m
If you have more questions let us know.
Thanks
OK thanks so much, Simion, for your advices!
I think I definetely need to give a try to Cloud Templates:-) !
OK I’m in with Header Composer. Sounds great… but!
As I told you… I need a two menus design.
I’ve easily designed them… but a big problem occurs on the first (top) menu.
When you click to see the sub-menu… well, the sub-menu appears below the second menu as you can see on the screenshot… and you cannot click on submenus.
https://www.dropbox.com/s/vjp4amze8nj5oe8/Tagdiv-2menus.jpg
So how do I get the submenus in front of the second menu?
Second problem… once saved, this new header is limited to one page. How to make it siteweide?
Best regards!
1. I solved my second problem of sitewide menu… just by pointing to it in the header section of Newspaper Theme Panel. Sorry! Is ther’s away to rename my “blank header template” to make it obvious.
2. In contrast, the crippling problem of first menu passing below the second still remains! Any solution?
1. Of course there is, you can name it while editing it, either in the backend
– http://prntscr.com/obzqs1 – http://prntscr.com/obzqyh
Or in the composer – http://prntscr.com/obzrhi – http://prntscr.com/obzs5b
– http://prntscr.com/obzsar
2. I see you have built a cloud header template and applied it. But on mobile it is empty.
Please edit the header template and check if there are any elements in it in mobile mode
– http://prntscr.com/obzth5
When creating a cloud header template you must add elements in both desktop and mobile mode. If there are no elements for mobile, the header will be empty.
Let me know if you have more questions or I misunderstood the problem.
Hum… my mobile menu was fine 🙂 ! But perhaps you saw it before I finished it!
But I’m affraid you didn’t answer my really main question about the first sub-menu going under the second menu (see my former screenshot that show you the problem…
I’m affraid we encounter frontend problem now… because of the server issue… so you can’t see it live.
If you prefer I can start another thread abput this specific question.
Somehow I missed that question, sorry about that. I see the problem, it is happening because the header menu elements don’t have a visibility priority one over the other. They are the same, regardless of how many are in the page.
I could give you a CSS solution for this, it will make the top header menu element display over the bottom one – http://prntscr.com/ocgpoe
The code can be entered in the theme panel->custom code->CSS section
.td-header-desktop-wrap .tdb_header_menu:nth-child(3) {
z-index: 998!important;
}
Let me know if you have more questions. Either here or create a new topic.
OK thanks so much Simion! I cannot try it for now because of server isssue.
Could be interesting to interger in a future update this “visibility priority” dimension in the UI!
Best regards
Hi,
I there is still a problem, or you have another question, just let us now!
Thank you!
It works fine! Thanks! Will I have to delete the CSS after a future theme update?
I hope this visibility priority setting will be adressed, to appear in the common UI soon.
But the problem of visibility priority remains on the mobile menu… as you can see now on the final address http://www.gogin.eu
I have added this on our to do list, but I can’t say when we will get to it however.
I forgot to check on mobile, it is the same issue there. So please enter this code as well
.td-header-mobile-wrap .tdb_mobile_horiz_menu:nth-child(3),
.tdb_mobile_horiz_menu .sub-menu {
z-index: 998!important;
}
You can keep these codes in the theme panel for the time being, they won’t cause any problems. Let me know if they work correctly as in my tests – http://prntscr.com/odgr5k
Sorry for this inconvenience.
