A few tweeks

[sittingprettyclothing]

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.

[David Martin – Support]

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;;
}

[sittingprettyclothing]

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.

[David Martin – Support]

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;
}

[sittingprettyclothing]

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.

[Rui Guerreiro – SUPPORT]

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

[sittingprettyclothing]

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

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

[Rui Guerreiro – SUPPORT]

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

-Rui

[sittingprettyclothing]

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.

[Rui Guerreiro – SUPPORT]

Thanks for explaining further.
Use this code.

nav .menu ul li > a {
    padding: 4px 15px!important;
}

-Rui

[sittingprettyclothing]

Yes! Thanks so much.

You guys are incredible. 🙂

[Rui Guerreiro – SUPPORT]

No problem 🙂

-Rui

[sittingprettyclothing]

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.

[Rui Guerreiro – SUPPORT]

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

[sittingprettyclothing]

It doesn’t seem to work?