Navigation elements not responding to css adjustments

Support Area Forums Kerygma Navigation elements not responding to css adjustments


Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question:
  • Author
  • #19262
    Avatar photoChristian Presley

    I’m having a bit of a weird issue. If you visit the home page of the site and, using Chrome, inspect element on any of the navigational elements, then proceed to try to adjust the padding or margin, nothing happens. Even changing them in the css file has no effect.

    I saw a couple css calls that I’m not familiar with in my day to day development, such as vertical-align: middle. I wonder if that could be an issue?

    Hopefully I’m just overlooking something.



    Bill Robbins

    Hello Blue,

    Great question there. The navigation menu is set a bit differently in this theme. I’ve struggled for years with vertically centering elements when I don’t know the height of the container.

    If someone has a tall logo, then I need more space at the top of the navigation menu than if someone has a short logo.

    This time around, I took a different approach. The header-content div which wraps up the logo and navigation bar is set to display: table and the logo and navigation are set to display: table-cell. This allows the use of the vertical-align: middle property so the navigation will line up in the center of the logo vertically.

    If you need to change it you can. Here’s how to “reset” that:

    1. Go to the Theme Options page and select the Advanced tab.
    2. Scroll down to the Custom CSS box and paste this:
      #header-content {
      	display: block;
      #logo {
      	float: left;
      	display: inline-block;
      nav#top-menu {
      	float: right;
      	display: inline-block;
    3. Update your settings.

    You could then use padding on the navigation items or a top margin on the nav#top-menu to position it.

    Or if you just need more space, you could add some padding to the logo without changing the display: table. Here’s what that could look like:

    #logo img {
    	padding-top: 10px;
    	padding-bottom: 10px;

    If you have any questions, just let me know.


Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Navigation elements not responding to css adjustments’ is closed to new replies.