Author Posts

[Matheus]

Hi guys,

Hey, after you update that allowed me to put my logo above the slider, I found a little tiny problem with alignment. If you access (www.militarshopping.com.br) you’ll see that:
1º- My store’s name is tiny bit to the right.
2º- With the new img the items bellow collapsed (:c)
3º- The brand logos are aligned to the left, I would like them in the middle (I used a S7 edge, chrome mobile browser to access the website)

4º how do I change my Categories menu to something like this?

5º- How do I change the navbar only to the Shop section? My blog navbar is the same at the sop navbar, I would like to they be different. Is it possible?

Thank you guys, sorry for these bunch of questions… I really need your help.

Matheus A.

[Yogendra]

Hello Matheus

1) Your store name is at the center but the font size is too big to show it on small devices. You have added custom CSS for that (.promo-section h1 {font-size: 5em!important;}). Try to add custom CSS for smaller devices too using media queries

2) First of all, try to add an image of small width. As the Background Screen height is the same you need to adjust your image and content accordingly

To make your image of small width try this CSS

.promo-text img{
  width:200px;
}

3) Brand logos are already in middle, you will see if you add an image of small width.
Also, there is missing Logo for smaller devices. Try to add logo by going to Appearance -> Customize -> Sticky Header & Logo Settings

4) You need to hire someone who can customize this kind of style. You can’t achieve without writing Custom CSS code.

5) Yes you can have any number of Menus, Go to Appearance->Menus
There you’ll find an option to Create a new menu. Add your name to it (eg Footer Menu) and add pages. DO NOT SET to primary from the bottom Display Options under Menu Settings. Now you can easily add this menu to the footer columns using Navigation Menu Widget

Regards

[Matheus]

Hi guys,

Thank you for the answers. I got some more…

Is there a way to I edit the css when is in mobile version, because the size of 200px for the .promo-text img is too short for this kind of layout. I used 5em to the .promo-text h1.

It will correct for sure if I downsize the image and the font-size, but is there a way to in mobile version it changes for a specific CSS, just like when you edit a row, for example.

Thanks.

Matheus A.

[Yogendra]

Hello Matheus

Yes using media queries you can target any screen size

For example :

1) Below media query will target screen size of max 480px

@media only screen and (max-width: 480px) {
/* YOUR CSS HERE */
}

2) Below media query will target screen size in between 481px to 766px

@media only screen and (min-width: 481px) and (max-width: 766px) {
/* YOUR CSS HERE */
}

and try to add !important to override CSS when its not working. Search Google for its usage

For your second question.
Yes you can add a class to it via Page Builder and then try to add CSS for that class

Regards

[James]

Hey, thanks for the blog article.Really looking forward to read more. Much obliged.

[Author]

Posts