Mobile Version Header

[davidmh.es]

Hello,

My name is David Martínez and I’m working with “Porto – Responsive HTML5 Template” from Themeforest. I’m modifying the template, you can check in :

http://www.dmpsicologa.es/test/acercademi.html

http://www.dmpsicologa.es/test/contacto.html

But I would like to focus in Mobile header and to have “wider” square button for the Mobile Navigation menu & bigger text on “drop down” mobile menu & bigger linked region (all the line of navigation text).

Where is specific located CSS code to modify?

I did not found it.

Thanks in advance

---

[davidmh.es]

This reply has been marked as private.

[Support]

Hello, first thanks for your purchase.

Here’s the code you need to reproduce you desired layout for mobile. Add in (css/custom.css):

@media(max-width: 575px) {
    #header .header-btn-collapse-nav {
        width: 100px;
        font-size: 20px
    }
    #header .header-nav-main nav > ul > li > a {
        display: block !important;
        text-align: center !important;
        font-size: 20px;
        font-weight: 400;
        padding: 20px 0px;
    }
}

Seems that is the first time you are using porto, right ? Keep in mind to not make changes in the template core files like “theme.css”, “theme-elements.css”, “theme.js”, “theme.init.js”.

If you need custom CSS always use the “custom.css” file. And for JS is the “custom.js”. The purpose is avoid conflicts when you update the template in the future updates.

We hope this helps!

kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[davidmh.es]

Hello,

I updated the code and I uploaded to the folder /css/custom.css but when I preview… is not applied… and inside Dreamweaver it looks like work…

Any idea?

---

[Support]

This reply has been marked as private.

[davidmh.es]

Hi,

I cleared the cache and now is working in vertical mobile position, but not in horizontal…

Should be modified too for all mobile formats???

Please, let me know

Thanks in advance

---

[davidmh.es]

Hi,

I modified to allow to see in other devices

@media(max-width: 990px) {
#header .header-btn-collapse-nav {
width: 100px;
font-size: 20px
}
#header .header-nav-main nav > ul > li > a {
display: block !important;
text-align: center !important;
font-size: 20px;
font-weight: 400;
padding: 20px 0px;
}
}

---

[Support]

Hello,

Great that you figured this out!

If you need further help feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts