Need a bit more help with increasing the size of the logo image in Purity III

mbmtsv

This is in continuation of the discussion that was marked resolved:
https://www.joomlart.com/forums/d/19583-how-do-i-increase-the-size-of-the-logo-image-in-purity-iii-navigation-bar/6
I appreciate all the help I have gotten so far but, unfortunately, the proposed changes are not quite enough as many elements still "seem to think" that the navigation bar hasn't increased. For example, I have a very simple article with bookmarks and links. When I click on a link it jumps to a corresponding bookmark but the top of the text gets hidden under the navigation bar. I am looking at it using Firefox developer's tools but I I don't have enough knowledge of CSS, etc. to figure out what needs to be done... Also, it all looks pretty bad on small screens but that's another issue. If someone is willing to take a look I would be more than happy to share a site url via a private message. Thanks.

Ninja

mbmtsv
Hi
Kindly share the site URL here so i can check it on your site.

Regards

mbmtsv

Ninja Hi!
OK, the URL is http://dev.aragatsmusicfest.com/index.php/en/about-alias/faculty
Thank you for your help!

mbmtsv

promediatraining
Can I somehow use a different image for small screens? Thanks.

teitbite

mbmtsv Hi. Additionally as Your question was to use a different logo for mobile. You can use a code like:

@media only screen and (max-width:767px) {
.logo-image > a {
    background: url(/images/headers/Aragats_Header.png);
    display: block;
    height: 60px;
    width: 120px;
    background-size: cover;
}

.logo-image > a > img {
   display: none;
}

Ninja

Hi
Use this code for logo size custom.css


@media(min-width:1200px) {
.logo-image > a {
    max-width: 1200px;
    max-height: 288px;
}}

the big logo appear till 1200px screen, you can change the value as per needs.

There is no much to fix because the logo you are using is too big to adjust in every screen size, you should use a low width for logo.

You can add different logo from template style options.
Upload small image, but you need to customized the logo code as it force image to show max width.

Regards

mbmtsv

Thanks everyone and I will try your code but my main question was about elements being hidden under the logo... Please try clicking on the links on the page. Thank you again.

teitbite

mbmtsv Hi. I believe You are talking about off-canvas and menu buttons:

.off-canvas-toggle, .navbar-toggle {
    background: #cc0000;
}

mbmtsv

teitbite No, I am not talking about the off-canvas. There are 4 links on the top of the page with the names of instruments: violin, viola, etc. Clicking on those should result in jumping to bookmarks with the same names. This works except top of the bookmarked content gets under the navigation bar. This is taking place when looking on a big screen. Thanks.

teitbite

mbmtsv Hi. I'm afraid anchors will always result in moving to top of the screen without possibility to check where fixed header ends. This is who HTML works and browser renders this action. So if You are willing to use anchors, in addition to such a big logo in header, I would advice no to use a fixed header, but to make it scroll with page. Use this code to make it this way:

body {
    padding-top: 0;
}

#t3-mainnav {
    position: relative;
}

mbmtsv

teitbite Hi. I see... Ideally I wanted to make just the logo part to scroll away and to leave the navigation menu always on top. Is that difficult to do? Thanks a lot for your help!

teitbite

mbmtsv Hi. I'm afraid it would require some more work to do so. I'm afraid we do not support that kind of customizations, sorry.

mbmtsv

teitbite OK, thank you. Two simpler questions: I have disabled the off-canvas menu. Can I now move my logo more to the left? And how can I adjust the location of the head-search position? Thanks!

aman204

mbmtsv Can I now move my logo more to the left?
And how can I adjust the location of the head-search position?

Try add this to custom.css file and adjust values accordingly :

@media only screen and (max-width:580px){.off-canvas-toggle + .container .navbar-header .logo{left: 5px !important;}.head-search .mod-languages ul{margin-top:15px !important;}}

mbmtsv

aman204 Thank you a lot. I will try this later today.

mbmtsv

I've made all the suggested changes to custom.css and everything kinda works but not quite right. A couple things I don't understand:
1. Why my logo width seems to be limited to 1200px on a big screen even when I change the media min-width and the max-width in the code as follows:

@media(min-width:1900px) {
.logo-image > a {
    max-width: 1900px;
    max-height: 270px;
}}

The new image file I am using is 3500 by 492...
2. On small screens the logo is resized but gets cut off on the right no matter how I change the height and width numbers in the corresponding code.

I know I need to learn a lot about CSS myself and I am slowly learning but in the meantime could you please help to make sense of what I see?

Thanks.

aman204

mbmtsv Hi

1) It is due to the "Container" parent div in which the rest of the HTML elements are wrapped which provides a fixed width for the layout and the logo img div is also inside the "Container" parent div due to which it doesnt go beyond the parent div width

If you seek to circumvent with the logo image added by you to span beyond certain screen breakpoint, Would suggest to add this instead to custom.css file :

@media(min-width:1900px) {header#t3-mainnav{background: #c00 url(/images/headers/Aragats_Header.png);padding-top: 12em;}.logo-image > a > img{display:none;}}

However the same might require more CSS customizations to get concise results

mbmtsv

aman204 It's getting complicated... I guess I am more concerned about the logo being cut off on small screens... Thank you.

Ninja

mbmtsv
Hi
Logo is not cutoff, its just resized in small screens, we shared all the codes that can be used to changed the logo size in mobile view.
Mobile width is smaller then PC, you can not get exact same logo in such a small view.

Regards

mbmtsv

Ninja I understand that it is resized but it also gets cut off on the right. Please look closely at the shape of the mountain ridge. I understand that it might seem silly to do what I am trying to do but I don't have another image to work with. Thank you.

Ninja

mbmtsv
Hi
post screenshot of issue and illustrate the problem in it,
as its not clear what you want to achieve here.

Regards