Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #19503


    In the website I’m working on I have added a secondary menu on the header (you can see it here –>

    This new menu looks great in iPad when horizontal but it gets cutted when vertical and it desapears in the iphone.

    I really would like to know how to make it “responsive”.

    And another question, is this menu going to be a problem when I install WPML and the translation buttons?



    Hi mctt,

    There isn’t a need to define the height and width of the #header_sub_menu that I can see. Removing them does help alignment a bit however.

    On layouts below max-width of 767px, the sub menu class gets display:none added to it. To remove that, you should add a new rule to overwrite it. Ex:

    @media only screen and (max-width: 767px) {
    .sub_menu {
    display: none;

    Then you can work on styling it for the various layouts. Even just adding a right padding or margin to the .sub_menu will get it looking like it belongs.




    Hi Devin!

    Thanks for your response, but I can not find where should I change this rule. Can you just point the right direction to it?

    Also, I would like that my logo partner list links to open in a blank page, I tried to add some simple html code to the link field in my frontpage template builder but it didn’t work. Can you please let me know how to change this? I’m working hard to have this site ready to launch this weekend.




    There is no need for you to ever find rules, just drop the new rules at the end of your custom.css file or enter them on the bottom of Quick CSS which is located in the back end if you follow thee buttons -> Choices > Theme Options > Styling … at the bottom of the page is the Quick CSS and that is where you would paste the code block above.

    On the iPhone it makes little sense to keep the menu as is since it will become difficult to use due to the size constraints. The menu automatically is converted into a a drop down navigation select box which is already optimized for multiple smartphone screen sizes.

    If you are interested in scanning the theme files to look for specific css or html structures, just download the free notepad++ ( ) and after installing , download a copy of the theme to your local desktop. Using Note++ do a Find on the entire folder and sub-folders and you will be shown the line numbers wherever the term is used that interest you.




    Thanks guys! it works great now!

    (P.D.: Sorry for creating two treats about this subject, my mistake :))

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Secondary header menu not displaying in iphone’ is closed to new replies.