How can I make the secondary menu responsive ?

Alex Selejan
asked 9 years ago

Hello,
My question is, how can I make the secondary menu responsive ? I have followed the steps in provided as an answer to this question (http://www.designwall.com/question/create-a-second-menu/) and everything worked out well. I have added the new menu in the area with the id #under-navigation. Do you happen to have any suggestions? or some best practices that I could implement or follow?

P.S. I need to mention that I only applied styling to style.css file and did not touch the responsive.css one

1 Answers

DominicStaff
answered 9 years ago

Hi,
Please send me your site for further checking.
Regards,

selejanalex
replied 9 years ago

This would be the website http://trendsonline.staging.wpengine.com/ . Currently I am still working in a staging environment. I don’t think I was specific enough. (My bad!) The menu is responsive, however I am trying to make the vertical menu lines align across different screen resolutions. Do you happen to have a recommendation on how I can achieve this ?

dominic Staff
replied 9 years ago

You can try the following code:

@media (max-width: 979px) {
.secondary-menu {
   background-color: #000!important;
}
.navbar-fixed {
    background-color: transparent;
} 
.secondary-menu ul {
   margin-left: 0;
   background-color: #000;
   font-weight: normal;
}
.secondary-menu li a {
    color: #fff !important;
}
.secondary-menu ul li:nth-child(1) {
    border-top: 1px solid #222;
    border-left: 0;
}
.secondary-menu ul li {
   float: none;
}
.secondary-menu ul li {
    border-bottom: 1px solid #222;
    border-right: 0px none;
}
.secondary-menu li:hover {
    background-color: #111;
}
}

If you still face there issue, please send me username & password of your site for further checking.
Hope this helps !