Docs

[ikrasnov]

Hello,

2 questions/issues:

1. URL: https://irmsinc.com/staging/our-company/in-the-news/

I would like to style the posts on the blog page to look similar to the attached image. Could you please point me in the right direction to accomplish this?

2. Is there a way to make the main top navbar not collapse to a second line when sizing the window down? example here: https://irmsinc.com

The customer would like the text to shrink instead of moving to the next line, and have the menu button appear at a lower horizontal resolution?

Thanks,

[Rupok]

Hi there,

Thanks for writing in!

#1. Please enable the post meta first so that we can provide your some tailored code to add the border.

#2. You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px) and (max-width: 1330px) {
.x-navbar .x-container.max.width {
  max-width: 100%;
  width: 100%;
}
}

@media only screen and (min-width: 980px) and (max-width: 1100px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 12px;
  padding-right: 12px;
}
}

Hope this helps.

[ikrasnov]

#1: Could you elaborate on this a bit more, did some reading and are you referring to the custom fields checkbox within each post?

2# This is really close to what they were looking for, the only change that it still needs is that when the site is docked to half of the screen, the customer would like it to display the full menu rather than the mobile dropdown. (picture attached – desired on the right).

Thank you

[ikrasnov]

Also a quick one:

In Internet explorer only, the search icon drops down to the next line in the navbar, is there a way to remedy this?

https://irmsinc.com/staging/

Thanks a ton,
Igor

[Rupok]

Hi there,

#1. You don’t have the comments and read more under your posts so you need to add first. You can try enabling post meta from Customize > Blog – http://prntscr.com/c8yqcu

The display of the meta will depend on the stack you are using. So you need to enable this first so that we can see the position of them.

#2. The mobile menu will be triggered on screen size 980px and smaller. If you want to show the desktop menu instead of mobile menu for any specific screen size; you can try this CSS :

@media only screen and (min-width: 768px) and (max-width: 980px) {
.x-nav-wrap.desktop {
  display: block;
}

.masthead-stacked .x-btn-navbar {
  display: none;
}

.x-nav-wrap.mobile {
  display: none;
}
}

So the desktop menu will be shown on the screen from 768px to 980px as well. You can change this as well if you need. Also you might need to adjust the previous CSS as well. As you are building the site and code is already provided; I believe you will be able to adjust this yourself based on your requirements.

#3. Maybe you are using very older version of IE which is obsolete and abandoned by Microsoft.

Cheers!

[Author]

Posts