[Resolved] utzawieja.pl – MENU

[Robert]

Hi

how are You?

I wanna ask about 2 thing – I work on the MENU in the TOP on
http://www.utzawieja.pl/

1. How can I add a white border, 2px, into the orange button in the menu “FORMULARZ ZAPYTANIA”
after I go with the mouse over it? I add this code but someting is there wrong

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a:hover {
background-color: rgba(19,27,58,1.0);
border: 1px;
border-color: #ffffff;
transition: all 0.5s ease 0s;
}

2. now is the orange button in the menu to high
– the TXT “FORMULARZ ZAPYTANIA” should be in one line with all other buttons
Its passible?

Kr
Robert

[David]

Hi there,

1. Try this for your button CSS:

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a {
    background-color: rgba(255,94,20,1.0);
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0); /* Create transparent border */
    line-height: 40px;
    padding: 0px 24px;
    border-radius: 0px;
    margin-left: 30px;
    transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a:hover {
    background-color: rgba(19,27,58,1.0);
    border: 2px solid rgba(255,255,255,1);
    transition: all 0.5s ease 0s;
}

2. To vertically align button:

@media(min-width: 769px) {
    .main-navigation ul {
        display: flex;
        align-items: center;
    }
}

[Robert]

Hi

The border around the buttom works now! 🙂

Also I addes this code:

@media(min-width: 769px) {
.main-navigation ul {
display: flex;
align-items: center;
}
}

but the botton FORMULARZ ZAPYTANIA is still to high …

Thx
Robert

[David]

You have some broken CSS – i have commented below to show the line that needs deleting:

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a:hover {
    background-color: rgba(19,27,58,1.0);
    border: 2px solid rgba(255,255,255,1);
    transition: all 0.5s ease 0s;
}transition: all 0.5s ease 0s; /* DELETE THIS LINE */
}

@media(min-width: 769px) {
    .main-navigation ul {
        display: flex;
        align-items: center;
    }
}

[Robert]

yep – Ypu right!

it works

thx
Robert

[David]

You’re welcome

[Author]

Posts