A few tweeks – swiftideas

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 23 replies, 3 voices, and was last updated 7 years by David Martin – Support.

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

Back to forum

Posted in: Neighborhood
December 23, 2016 at 2:38 pm #307911

sittingprettyclothing
Member

Post count: 123

Hi there

I was wondering if you could take a look at a few things:

Mini Header
1. Is it possible to make the mini-header a little narrower, maybe half the size it is now?
2.The drop down menu doesnt seem to wrap correctly around the text, seems to be cutting it off. (See screenshot 2)
3. There seems to be quite a space between the mini header’s ‘SHOP’ menu text and the drop down, the dropdown menu looks too far down. See screenshot 3
4.Spacing is not the same as the main header. See screenshot 4
5. How do I make the mini header text bold like the rest of the headers and drop down/sub menus

Shop page:
6. Change the sorting button so it looks like the other ones in the website. Screenshot 5.

Thanks a lot.

Attachments:
You must be logged in to view attached files.

December 28, 2016 at 11:28 am #308154
David Martin – Support
Moderator

Post count: 20834
1) You could use this:
```
#mini-header .container {
    max-width: 900px;
    margin: 0 auto;
}
#mini-header .span9 {
	width: 600px;
}
#mini-header .span3 {
	width: 200px;
}
```
2) You have set the option in the menu parent “Natural Width Mega Menu” – remove it.

3) The dropdown will always be at the bottom of the header.

4) Which one do you want to style both as?

5) Use this:
```
nav .menu li > a {
    font-weight: bold;
}
```
6) That is not possible as such, you could get it closer:
```
input[type="text"], 
input[type="password"],
input[type="email"], 
textarea, select {
    border-color: #000 !important;
    background: transparent !important;;
}
```
December 28, 2016 at 1:16 pm #308176

sittingprettyclothing
Member

Post count: 123

Hi David

1. With regards to this point, I meant to make the whole bar narrower. I should’ve maybe attached a screenshot. (see screenshot 1)
2. Thanks, but the main header menu seems to be spaced too far now. See attached screenshot 2.
4. I would like the mini header’s spacing to be like the main headers. In screenshot 4 its the spacing at the bottom that I want instead.
6. First it seemed to not have changed much but then when I opened a different browser it displayed differently. Ill address this in another post I posted a while back.Just have to find it first. Is it possible to change the font and font size so it looks similar?

Attachments:
You must be logged in to view attached files.

December 29, 2016 at 2:41 pm #308354
David Martin – Support
Moderator

Post count: 20834
1) To reduce the height you need to remove the bottom margin from your Woo currency switcher:
```
#mini-header .woocommerce-currency-switcher-form {
    margin-bottom: 0;
}
```
2) You can test increasing the natural width menu using this:
```
li.menu-item.sf-mega-menu[data-megamenucols="3"].sf-mega-menu-natural-width > ul.sub-menu {
    width: 100%;
}
```
4) This looks correct currently?

6) Each browser will handle the select option slightly differently as standard.

Yes, you can change the font CSS like this:
```
.woocommerce .woocommerce-ordering select, 
.woocommerce-page .woocommerce-ordering select {
    font-size: 10px;
    text-transform: uppercase;
}
```
January 3, 2017 at 2:58 pm #308655

sittingprettyclothing
Member

Post count: 123

Almost done ! 😀

1)Perfect!
2)Perfect! I’ll see what looks best

4)Is it possible to make the spacing less? It doesnt look that bad, but it is quite a bit different from the spacing in the main header menu. From what i can see the main header menu’s looks like its 5px… I might have said it wrong, line height rather?

6)Perfect! Except for the browser issue.

January 3, 2017 at 4:34 pm #308665
Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779
Regarding 4 try this one to reduce the sub menu width.
```
li.menu-item.sf-mega-menu[data-megamenucols="3"].sf-mega-menu-natural-width > ul.sub-menu {
    width: 50%!important;
}
```
-Rui
January 5, 2017 at 10:15 am #308925

sittingprettyclothing
Member

Post count: 123

@Rui – Thanks, I set it at 65% and seems to cut off less.

@David – Just waiting on nr. 4)’s answer.

January 5, 2017 at 10:33 am #308926

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

my reply was related to Nr 4. What’s missing in that one?

-Rui

January 5, 2017 at 2:53 pm #308981

sittingprettyclothing
Member

Post count: 123

Oh no, nr was about the mini headers line height/spacing not being the same as the main header. I’ll try making it more clear in the the next screenshot.

Attachments:
You must be logged in to view attached files.

January 5, 2017 at 2:59 pm #308983
Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779
Thanks for explaining further.
Use this code.
```
nav .menu ul li > a {
    padding: 4px 15px!important;
}
```
-Rui
January 6, 2017 at 2:04 pm #309123

sittingprettyclothing
Member

Post count: 123

Yes! Thanks so much.

You guys are incredible. 🙂

January 6, 2017 at 2:11 pm #309124

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

No problem 🙂

-Rui

January 6, 2017 at 2:19 pm #309127

sittingprettyclothing
Member

Post count: 123

Sorry to come back.

But now the main menu’s padding is wrong. Looks like it affected it too. See screenshot.

Attachments:
You must be logged in to view attached files.

January 6, 2017 at 6:36 pm #309177
Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779
Can you replace this one:
```
nav .menu ul li > a {
    padding: 4px 15px!important;
}
```
By this one
```
#mini-header nav .menu ul li > a {
   padding: 4px 15px!important;
}
```
Thanks

-Rui
January 9, 2017 at 8:27 am #309234

sittingprettyclothing
Member

Post count: 123

It doesn’t seem to work?
Back to forum

Posted in: Neighborhood