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

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

mbmtsv

Ninja Hi
Here's a screenshot:
Thank you.

Ninja

mbmtsv
Hi
there is too much custom code in custom.css file that does not required to force the image for a min height

replace all the code in custom.css file with this

.logo-image > a {    max-width: 200px;}


.logo-image >a > img {   min-height: 55px;}


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



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


body {
    padding-top: 0;
}

#t3-mainnav {
    position: relative;
}

.off-canvas-toggle {
   display: none;
}

Regards

mbmtsv

Ninja Thanks a lot! I adjusted it a bit more and now it looks much better!