Nav menu behaviour on 13" screen and tablets

T Joyce
asked 10 years ago

Hello,

I’m wondering if you can help me resolve a problem I’m having with the theme on screens that are from roughly 640-1280px wide.

On these screen sizes, the nav’s height increases, with the nav menu items dropping below the header image. This covers up elements from the section just below it. I’d like to simply have the nav font get smaller for these screen dimensions, rather than the nav menu dropping down below my header image. Can you let me know how to execute this? The site in question is: http://teyasparks.com.

Thank you!Tara

1 Answers

Jackie Lord
answered 10 years ago

Please try follow my instruction below: Step 1: Open functions.php in your theme folder /wp-content/themes/dw-page-retro-sta/. Then find the codes:

 <div class="nav-collabse collabse">

Change it to:

 <div>

See screenshot: Step 2: Open header.php in the same folder, then remove those codes:

 <button data-target=".nav-collapse" data-toggle="collapse" type="button">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

See screenshot:

Besides, you may need to work on CSS in order to style your site.

Let me know if you need help 🙂

T Joyce
replied 10 years ago

Hi Jackie,

T Joyce
replied 10 years ago

Thank you for your answer. It’s really helpful if I wanted to remove the function of collapsing the menu bar entirely, but unfortunately I don’t want to do that. I want to change the function so that when the menu is on a screen from 640-1280px wide, the font size gets smaller on each menu item, rather than (as it works now) each menu item stays the same font size and drops below the header and making the menu bar taller.

Do you think you could help with achieving this?