Customizing Navbar features and other questions

Hello, I had several questions regarding my website, popmusicnation.com :

  1. Is it possible to tighten the gap in the navbar here? I am trying to make it so the bottom gap is not so massive.

  1. Is it possible to change the hover of the underline (the white line) on the homepage menu here to another color?

  1. What resolution is best for the post slider on the homepage? As shown here, the faces are not shown and I am wondering what size might be the best fit.

  1. The homepage is set to feature my most recent posts. I have two posts right now: “DREAM” and “Test Post 2.” However, only “DREAM” is appearing. How can I get the site to display my most recent posts?

  1. Is there a way to get the text body to feel more aligned at the center rather than it being so bunched up like so?

  1. How can I customize the color and width of the small white line (vertical) here on the navbar? :slight_smile:

Help would be so appreciated, thanks so much!

Hey Steven,

Here are the answers to each of your questions.

Your logo is taking up the space.

If you need the logo to stay at the same size, I’d recommend cropping the top and bottom parts of it. Doing so will also make your logo lighter so it helps reduce your page load.

Please add this code in Theme Options > CSS.

.x-navbar .desktop .x-nav > li.tax-item-3 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-3.x-active > a {
    box-shadow: 0 2px 0 0 red;
}

Change red to your desired color. For valid color values, please see https://www.quackit.com/css/css_color_codes.cfm

Regretfully, there’s no size recommendation for the slider as the slider’s aspect ratio varies from desktop to mobile screen. In desktop, the aspect ratio is a long horizontal rectangle.

In mobile, it becomes a short horizontal rectangle.

If you wish to override the aspect ratio, you can add this code and modify the padding-bottom value.

.x-post-slider .x-post-slider-entry {
    padding-bottom: 325px;
}

Based on your screenshot, the Filterable Index option under Theme Options > Ethos > Blog Options. That option filters restricts posts from being shown depending on your setting. For more details about the Filterable Index, please see our Ethos documentation at https://theme.co/apex/forum/t/customizer-ethos-options/131

You can also opt to disable it if you wish to display all of your posts.

This is not restricted by our theme. The problem is caused by <br> tags in your post content. You need to edit the breaks in your content.

For the left most border, please add this code in Theme Options > CSS.

.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: 6px solid red;
}

For the rest of the border, please add this:

.x-navbar .desktop .x-nav>li>a {
    border-right: 6px solid red;
}

Hope that helps.

Hey Christian, thanks so much for your response! Few more questions:

  1. [quote=“christian_y, post:2, topic:59883”]
    .x-navbar .desktop .x-nav > li.tax-item-3 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-3.x-active > a {
    box-shadow: 0 2px 0 0 red;
    }
    [/quote]

Upon putting this code in, I see that one of my options are not underlining in the preferred color (under “CONTACT”). However, the line underneath “HOME” does work properly when the mouse is hovering underneath it:

  1. I am wondering if there is a code to make this box – the drop-down sub-menu – to have rounded edges? Also, is there a code that would help me customize the opacity/transparency of both the box itself and the text (like font size) inside the box?

  1. Is there some way I can customize the blog posts on my homepage to feature the most recent date, author, etc, like so? (this image is from someone else’s site):

  1. How can I change who the author of a post is?

  2. There’s a lot of empty space on the sidebar here. Is there a way to fill it up by making the sidebar scrollable, or through a feature like Google or Amazon ads?

  1. How can I control the post carousel height? :

  1. What would be the code to control the border-right height and the opacity of the border-right line on the Navbar? :

  1. What would be the code to control the underline length and how can I make shorter so it’s more centered, rather than uniformly extended underneath the text? :

Thanks so much!!

Hello Steven,

Thanks for updating the thread. :slight_smile:

Please remove the previous code and add following CSS under X > Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a:hover {
    box-shadow: 0 2px 0 0 red !important;
}

Please add following CSS under X > Theme Options > CSS:

.masthead-inline .x-navbar .desktop .sub-menu {
    border-radius: 20px !important;
    background-color: rgba(216, 187, 187, 0.92);
}

Yes, please Turn On Post Meta under X > Theme Options > Blog > Content > Post Meta.

Please take a look at following tutorial.

You can add following CSS under X > Theme Options > CSS:

@media only screen and (min-width: 900px) {
  body .x-sidebar.right {
   margin-left: 21.536945%;
   top: 200px;
   position: fixed;
   left: 48%;
}
}

Please add following CSS under X > Theme Options > CSS:

.x-post-carousel.unstyled {
   height: 134px;
}

.x-post-carousel.unstyled .entry-cover {
   padding-bottom: 134px;
}

Please change the values as per requirement.

Actually border takes the height of the element it’s assigned too. In this case, border is assigned to navigation. So border will be the same height as navigation. You will have to adjust the height of navigation from Theme Options panel.

You can adjust the padding. Please add following CSS under X > Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 20px;
    padding-right: 20px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

Hey there, again, thanks for the response! Some more questions:

  1. [quote=“Prasant, post:4, topic:59883”]
    .x-navbar .desktop .x-nav > li > a:hover {
    box-shadow: 0 2px 0 0 red !important;
    }
    [/quote]

So upon using this code, I get this white, after-highlight that appears (under CONTACT), like so:

How can I change the color of that?

  1. Regarding the underline – is there a code to remove it altogether, or make it transparent?

Thanks!

And what would be the code to delete that small underline altogether?

Hi Steven,

To override that white box shadow line, you need to add the CSS code below to WordPress Dashboard > X > Theme Options > CSS:

body .x-navbar .desktop .x-nav > li.tax-item-4.x-active > a {
    box-shadow: 0 2px 0 0 rgba(215,17,70,0.94);
}
  1. Regarding the underline – is there a code to remove it altogether, or make it transparent?

Please consider that by adding this much of customization you will have a mess of CSS code that will be hard to handle later. The request that you have to remove the underline all together is achievable by changing all the other CSS code that we already gave you. you need to change the codes that contain box-shadow and replace the color part to transparent. For example, the code above I gave you will turn into:

body .x-navbar .desktop .x-nav > li.tax-item-4.x-active > a {
    box-shadow: 0 2px 0 0 transparent;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.