CSS Challenges: Navigation and a Line

Hi!

I’m having some CSS issues that I hope you might be able with. I did find the solutions from Generate.support topics but might be implementing them incorrectly.

Item 1: Navigation
In my design, I have navigation children/submenus. In the desktop view, I wanted to remove visual clutter and get rid of the down arrows where a submenu existed. I implemented the CSS below. This works great on desktop. On mobile, the arrows are still there in the hamburger menu, which is what I want. However on *tablet*, where a hamburger menu shows up, there are no arrows, so people can’t navigate to my sub menus.

Question: is there a way to have the arrows back on tablet, where a hamburger menu is in use (usually in vertical mode). Is this a width issue?

Here’s the code I’m using:

/* removes drop down arrows from top navigation */
@media (min-width: 769px) {
.menu-item-has-children .dropdown-menu-toggle {
display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children>a {
padding-right: 10px;
}
}
/* ends */

Item 2: The Line
I have a mainly white design, so I added a grey line under the navigation/header to create some visual separation. This worked absolutely fine with the code below, but for some reason no longer functions. I’ve made some changes to elements recently, but can’t clearly see why this no longer works.

/* adds bottom line to primary navigation header */
}
.site-header {
border-bottom: 1px solid #d5d5dd;
}
/* ends */

Thanks in advance,
Patrick