Overriding CSS of the Global Navigation links on mobile view of browser

[mlaplana]

Hello, 

We are trying to add custom css overrides to Global Navigation links in Mobile/Tablet View of a browser (specifically when the browser hits less than 768px window length). The attached image (global-nav-links-mobile-view.png) is a screenshot of the links in question.

However, upon inspecting the HTML, we noticed that the class names are dynamically generated, making it hard to target via class names with the usual ways using CSS (nav-links-html-classes.png).

The only way we can see to target these is using the parent div element with its role and aria-label attributes (<div role="dialog" aria-label="Global navigation">...</div>), as we found that this is the closest element with referenceable attributes that are targetable with CSS (css-override-code-snippet.png). 

Am wondering if we are just missing some other way to more easily target these Global Navigation links in mobile view, because selecting elements this way doesn't feel right and proper. It seems that these class names are dynamic only for the mobile view and they're not really so helpful to use their actual values in custom CSS as they don't really self-describe themselves as stylings for mobile view and for the global navigation.