Sela Theme: Some questions about CSS and the Navigation Bar

For the page titles, maybe you’re using the wrong selector? Try:

.entry-title {
   text-transform: lowercase;
}

As far as the admin toolbar goes, you’ll need a second rule, because you’ll need to set a different value for top depending upon whether or not the admin toolbar is present. Add these rules:

.admin-bar nav#site-navigation.main-navigation {
   top: 32px;
}
body.admin-bar {
   margin-top: 32px;
}

The first rule will position the navigation menu at 32px, which is just below the admin bar. The admin-bar class is added to the body element when you’re logged in so you can tell when the admin bar is present.

The second rule just pushes the rest of the page down so your site title doesn’t get covered up. When you fix a menu in place, it’s going to hide the top of the page because a fixed element is “taken out of the document flow,” meaning the browser acts as if the element doesn’t take up any space on the page. So what happens is that the top of the page gets hidden underneath both the admin bar and the fixed nav menu. You might want to actually add another rule that pushes the page down even when the admin bar isn’t being displayed. Usually what’s done is a margin-top is added to the body that is equal to the height of the fixed menu.

The solution for the admin bar worked beautifully! Thank you!

About the issue with text-transform, I was unclear. I would like all the page titles in the nav bar to be lowercase. I have the code as above with text-transform: lowercase; and also have tried ul.nav-menu as the selector, which will change the font (to Montserrat and made it white), but not the case of the letters.

Thanks so much for your help!

Also, how do you account for the admin bar being 46px in most mobile devices? Can that even be accounted for with CSS?

Again, thank you!

Ah, OK, it was the text in the navigation menu you wanted transformed. Just add the link element to the selector, like this:

ul.nav-menu a {
   text-transform: lowercase;
}

As far as positioning the menu bar below the admin bar on a mobile device, just add a media query that activates at the same time the height of the admin bar changes:

@media screen and (max-width: 782px) {
   .admin-bar nav#site-navigation.main-navigation {
      top: 46px;
   }
}

Hmm, I just noticed that your menu items aren’t showing up.

Thanks very much for your quick responses!

I just logged back in and I can see the menu items. But that you can’t see them is worrisome. Have they returned yet?

No. The only menu item which shows up is the current one, i.e., if I’m on the home page, the Home menu item shows up. The other menu items show up if I hover my mouse over them, but not in the normal state. The problem is this rule in your custom CSS:

a:visited {
   color:#ffb9ab
}

It makes the text of the menu items blend in with the background of the nav bar. I think you need to add an overriding rule for your menu text. You can add a color property to the rule I posted above:

ul.nav-menu a {
   text-transform: lowercase;
   color: #4f4f4f;
}

You’ll probably want to change it to something different; the color I used is the same color as the current menu item color.

Thanks! I had fixed that before, but accidentally removed that in all of the juggling.

You have been exceedingly kind so far answering all of my questions, and I have (I hope just one) another question. Now, I have added the @media code and I am checking how the site works on mobile devices at https://www.responsinator.com and the problem is that now when looking at the site the nav-menu is fixed at 42px but the admin-bar is not fixed, so there ends up being a space above the nav-menu. I’d like to get rid of that space. If it helps, the screens with this problem are iPhone 5 (landscape and portrait), iPhone 6 and 6+ (portrait only), Android (portrait and landscape), and Nexus 4 (portrait and landscape).

I know I have been ridiculously full of questions, so thank you for all of your help.

OK, first make this change to the media query:

@media screen and (max-width: 782px) {
   .admin-bar nav#site-navigation.main-navigation {
      position: absolute;
      top: 46px;
   }
   .admin-bar nav#site-navigation.main-navigation.scrolled {
      position: fixed;
      top: 0;
   }
}

Notice that for the first rule inside the media query, the position property is set to absolute instead of fixed. This allows the menu to scroll with the admin bar, but only at mobile widths (since it’s inside the media query).

The second rule is like the first, but it has a class added to the selector, called scrolled. When the element has that class assigned to it, then the menu bar will be fixed at the top of the screen.

So the only other thing to do is to add some JavaScript to assign the scrolled class to the menu bar after the user has scrolled the window down the same amount of space as the height of the admin bar:

1. Install the Header and Footer plugin. This plugin will allow you to add your own script code (this is also useful if you want to add other script code, like the one for Google Analytics, if you want to track how many visitors are coming to your site, and from where).
2. Once it’s installed, go to Settings → Header and Footer. In the field labeled Code to be added before the end of the page, copy & paste this script:

   <script>
   jQuery(document).ready(function($){
   
      // This function gets called with the user has scrolled the window.
      $(window).scroll(function () {
         if ($(this).scrollTop() > 46)
            {
            // Add the scrolled class to those elements that you want changed
            $("#site-navigation").addClass("scrolled");
            }
         else
            {
            $("#site-navigation").removeClass("scrolled");
            }
       });
   });
   </script>

   What this function does is to detect when the window has been scrolled more than 46px. If it has, then it adds the scrolled class to the menu. If the window has been scrolled less than 46px, then the scrolled class is removed.

One other addition you may want to make in your CSS. You might notice that when you hover over the admin bar, the menu items from the admin bar are hidden behind the nav menu. Add this rule so that the admin menu items show up in front:

#wpadminbar {
   z-index: 100001;
}

Oh my goodness ?? It looks great! Thank you so much for helping me all day! I am so pleased with how it looks!

OK, the only problem is you left out the opening “less than” sign (<) at the beginning of the JavaScript. That’s why you see script code at the very bottom of your site. Change this:

script>

to this:

<script>

whoops–thanks!