Make the home page link remain on screen for mobile?

Hi..

Please share your site URL.

Thanks.

Sure thing, it’s https://travelweta.com/

Also regarding the hamburger comment, I would be happy if the text menu items (links) were just stacked on top of each other if that is an option which can be ticked?

Thanks for much for checking into this, you’re awesome for the quick reply.

Hi..

Please go to Admin Dashboard >> Appearance >> Customize >> Theme Options >> Theme General Options.

Now copy below css code into paste into custom css editor.

@media (max-width: 480px){
.carousel-text .enigma_blog_read_btn {
     display: block !important;
} }
@media (max-width: 768px){
.carousel-text .enigma_blog_read_btn {
     display: block !important;
} }

Save the changes.

Thanks.

Hi there,

This is just fantastic thank you so much!

May I ask you about the max-width? I tried a test starting on desktop size … and then I grabbed the corner and dragged it to shrink the screen size down, down, down … and the link appears for the smallest size; however, there is a point in between where it disappears. I am wondering if the max-width could be another number so that the link never disappears regardless of all device sizes?

Is it possible to make the text remain large enough in the smallest screen size so that it is readable, and can a CSS be added to change the colour of the link to orange?

May I also ask, is there a way to make the image in the header remain 960 px wide as it’s max but then make it be 100% of width as it shrinks? At the moment, a small size of the logo seems to be appearing on the largest screen. It would be super cool if this image could act this way. Can we add another piece of code to that CSS?

I really appreciate this so much! I really love your theme, it’s so easy to use best I’ve found yet.

Kind regards,
Mike

Hi..

Please add below css into custom css editor.

.wl_rtl {
  width: 100% !important;
}
@media (max-width: 480px){
.carousel-text .enigma_blog_read_btn {
     font-size: 15px !important;
} }
@media (max-width: 768px){
.carousel-text .enigma_blog_read_btn {
    font-size: 30px;
} }

Save the changes.

Thanks.

Hi there,
Thank you very much for this; however, unfortunately when I use my iPhone I can’t see the link at all on the home page.
Also is there a way to get rid of the hamburger and just have a list of the menu items, is that an option?
Kind regards

P.S. Do you also know why the selection of background = white is still making the header background blue?

Hi..

Please add below css code into custom css editor.

@media (max-width: 480px){
.carousel-text .enigma_blog_read_btn {
     display: block !important;
} }

Do you want to change the background of header and we can’t get hamburger please explain in detail.

Save the changes.

Thanks.

Thanks so much, does that mean I should combine both, like this?

.wl_rtl {
width: 100% !important;
}
@media (max-width: 480px){
.carousel-text .enigma_blog_read_btn {
font-size: 15px !important;
} }
@media (max-width: 480px){
.carousel-text .enigma_blog_read_btn {
display: block !important;
} }
@media (max-width: 768px){
.carousel-text .enigma_blog_read_btn {
font-size: 30px;
} }

That’s correct I would like to change the background of the logo at the top from blue to white, and also with regards to the ‘hamburger’ I just mean the ‘stack’ icon which holds the links menu … wondering can I just show the links one under another without the the icon?

Kind regards,

Hi..

Please add below css into custom css editor.

.header_section{
    background: #fff !important;
}

Save the changes.

Thanks.

Thanks so much, I REALLY appreciate these updates! I have learned a lot from you and have branched out and added some more myself, which all work great together, I’m very excited. Here’s the code FYI:

.wl_rtl
{ width: 100% !important; }

.header_section
{ background: #fff !important; }

/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 1.2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 1.2em !important;
line-height: 1.4 em; }
.carousel-list li
{ font-size: 1.2em !important; } }

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 1.2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 1.2em !important;
line-height: 1.4 em; }
.carousel-list li
{ font-size: 1.2em !important; } }

/* Smartphones (portrait) */
@media only screen
and (max-width : 320px)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 1.2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 1.2em !important;
line-height: 1.4 em; }
.carousel-list li
{ font-size: 1.2em !important; } }

/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 2em !important;
line-height: 2.4 em; }
.carousel-list li
{ font-size: 2em !important; } }

/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 2em !important;
line-height: 2.4 em; }
.carousel-list li
{ font-size: 2em !important; } }

/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 2em !important;
line-height: 2.4 em; }
.carousel-list li
{ font-size: 2em !important; } }

/* Desktops and laptops */
@media only screen
and (min-width : 1224px)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 2em !important;
line-height: 2.4 em; }
.carousel-list li
{ font-size: 2em !important; } }

/* Large screens */
@media only screen
and (min-width : 1824px)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 2em !important;
line-height: 2.4 em; }
.carousel-list li
{ font-size: 2em !important; } }

/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{ .carousel-text .enigma_blog_read_btn
{ font-size: 1.2em !important;
display: block !important; }
.carousel-text h1
{ font-size: 1.2em !important;
line-height: 1.4 em; }
.carousel-list li
{ font-size: 1.2em !important; } }

My next task is to try to figure out how to centre the logo image at the top of the screen so it also centres with the animated text boxes, but currently the logo is just a bit to the left.

I would also like to make the image fill the full width of the screen on mobile. If I figure it out first I will post it here, I’m just not sure which padding variable to change.

Thanks again

P.S. I guess looking more closely above I could have omitted some redundant sections.

Hi..

Please add below css into custom css editor.

.logo {
    margin-left: 60px !important;
}
@media (max-width: 480px){
.logo {
    margin-left: 0 !important;
} }
@media (max-width: 767px){
.logo {
    margin-left: 0 !important;
} }

Save the changes.

Thanks.

Thanks so much for this.

My apologies, I can’t seem to make the logo fill the entire heading section, is there a padding variable perhaps that may need to be 0 as well?

Sorry if I have done something wrong.

Kind regards,
Mike